Product zoom function JK Kids

Posted October 2nd, 2008 in Case Studies

After a considerable amount of work we finally launched the product zoom function on the JK Kids website yesterday. This allows the user to mouse over the thumbnail image of a product and view a zoomed in image next to it. This post looks at the function along with some screenshots.

The JK Kids website uses the jQuery Javascript framework and I had originally been wanting to use the jqZoom plugin because it does exactly what I needed, but it proved to be too laggy and slow in Safari and Internet Explorer 6. So instead I initially used the code in it as a reference to what became the JK Kids zoom function. In the end the code I created doesn't resemble the jqZoom code at all but it works the same way.

It took a lot of work to get it working correctly across browsers and without being too laggy in the older versions. It still needs some minor adjustments before it is perfect across all browsers but for all intents and purposes it works perfectly at the moment.

The first screenshot below shows a product "popup" when the user first opens it. The thumbmail image is on the left and the product information on the right.

When the user mouses over the thumbnail image, the right side of the popup window shows a much larger image, matching the little grey indicator box when the mouse is. As the user moves the mouse around over the thumbnail the zoomed in image moves.

On Internet Explorer 6, having the zoom indicator image (the grey opaque image over the thumbnail in the above screenshot) made the zoom function pretty much unworkable because there was too much lag. Instead that browser version has a crosshair as the cursor instead and doesn't show the indicator.

The code works and has been tested in Internet Explorer 6.0+, Safari 3.0+, Firefox 1.0+ and Opera 9.10+. It doesn't work correctly in earlier versions of Opera (prior to 9.10) but checking the Analytics data we don't get any visitors to this site in anything earlier than 9.10 so it's not an issue.

If you would like to have a go and check it out yourself, go here and click on one of the products.