One of my very good clients came to me with an example website where the website had 3 or 4 different product images. These product images could be mouseovered to change a slightly larger image, and they could be clicked on to popup a much larger image.
Well, I’d done both these things before, but never at the same time. I was fairly sure that it should be relatively straightforward in theory…but as with anything osCommerce, theory and practice are usually like cat and dog, or chalk and cheese.
So, I set out to make it a reality, and here is what I came up with;
In the video, you can see that I have 4 product images (1,2,3,4 for ease of videoing!). The first is also shown as a larger image. If you mouseovered the smaller image, the slightly larger one changes – I thought this was pretty cool to get a quick overview of the product (imagine a front, back, side view)…
But also, if the user clicks the smaller images, the jquery fancybox kicks in and brings a web2 styled popup. All in all, it seems to work well. A little bit of work to get it all to play nicely, but worth taking the time to do, I think.