by Cedric Dugas on April 28, 2009
When you have to put forward 2 or 3 products on your web page, you always ask yourself : How I’m gonna offer an interesting view of these products? Well this script can help a bit. Using Jquery it can animate 2 or 3 products creating an interesting way of displaying them.
When you click on a product, the product image will zoom out to see a featured close-up shot and a description. When you click on another product, the last opened product will zoom back and the new clicked product will zoom out. Here’s an example so you can understand better:
Get this to work on your website
First you will need to use my HTML structure. Don’t forget to put a height and a width to all your product img tag, Otherwise IE is too dumb to understand.
On the interior div you need another class to specifie your close shot image, this picture need to be a css background image. The interior div is also where you put your product description. Download the script and start playing with it, you should be able to customize it in no time.