»

Cypria Auctions catalogue

Cypria Auctions catalogue, browse online with jQuery

Cypria Auctions catalogue, browse online with jQuery

Dino from Web Theoria called one day and said he needed a catalogue made in Flash. “Why Flash?” I asked. “It would be much better if this was HTML. Your PHP guy will find it easier to implement and it would be much more user friendly.” With Dino onboard I mocked-up the catalogue page to his design. “From now on,” I said, “Use HTML, CSS and JavaScript for your interactive web pages.” Flash is for … other things.

This was one of my first JavaScript projects. As such it is more an assembly job. Finding out about the wonderful tools already available. Here are the ones I used to code the catalogue:

  • jQuery, turning JavaScript into playtime ;-)
  • jQuery UI for tabs and scaling the thumbnails
  • Ariel Flesler’s SerialScroll jQuery plugin
  • The ever useful Fancybox
  • border-radius.htc for CSS3 styles in Internet Explorer 6, more about that here

 

Fancybox displays artwork details loaded in with Ajax

Fancybox displays artwork details loaded in with Ajax

Site visitors and potential bidders can easily scroll through thumbnails of artworks. If they like the look of something then clicking it will open a lightbox where they can read the details, make a bid or contact the auction house. Forms are swapped in with jQuery animations. From within the lightbox you can continue to browse with the previous and next links. Additional artwork details are loaded in with Ajax.

 

The JavaScript was straight forward

The true challenge was with the CSS and compatibility with Internet Explorer 6. Still a big deal in 2010. It also works without JavaScript enabled. The thumbnail area becomes a vertical scrolling panel linking to standalone pages for the artwork details.

 

The Cypria Auctions catalogue is live and can be viewed here.

Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>