Fancybox AND image swapping in osCommerce

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.

5 Replies to “Fancybox AND image swapping in osCommerce”

  1. Too much code to post and this was done on a live site, so would need to strip out the code and make presentable. Can be done if you wish to sponsor that.

Leave a Reply

Your email address will not be published. Required fields are marked *