Friday, 12 February 2010

jQuery Zooming

Many online stores offer potential buyers the choice to view large version of images of products, but increasingly there is a tendancy to allow 'zooming' in on products to see more detail.  Amazon allows this with many of its products, for instance.

There is a plugin for jQuery which does something similar (ish) which I've add to my store demo.  Click on the product name for one of the products, I suggest the iPad or iPod Nano, to view this in action.  In the overlay window, hover over the image and you will see how this works.  Well this nifty little plugin is called jqZoom, but I also found a non-open source alternative that doesn't use jQuery called Magiczoom, which is used on a number of commercial sites.

You will notice that a few of the images are missing from the demo.  With jqZoom, you need to store small and large versions of each product image, although the large image only gets loaded when you hover over the small image.  Each image is stored as a Blob linked to the product.  As I was loading up the images using the application I kept getting a 'ORA-01691: unable to extend lob segment.....' error, so I need to look into this.

8 comments:

Martin Giffy D'Souza said...

Hi Paul,

Nice work. I tested with FF and it isn't working for your online store.

Martin

Paul Brookes said...

Hi Martin,

Thanks for your feedback.

Which version of FF are you using, as I'm using 3.5.7 and its working fine? Did you try looking at the iPod and iPad, as many of the other products haven't been setup properly with small and large images?

Thanks,

Paul.

Roel said...

Hi Paul,

Cool stuff. But the zooming only seems to work for the first item on the page. If I click on of the other items, the picture opens op in the same browser window (replacing the 'store'). Using FF 3.0.

Regards
Roel

Paul Brookes said...

Hi Roel,

Thanks for the feedback.

Can you tell me the exact version number of FF you are using? I'm having trouble replicating this. To help me find out why, can you tell if there is anything you are doing prior to clicking on the first product header.

I know if a product name is clicked before the page completely loads then the product is displayed as you say, but I'm surprised it does it for the second product you select.

Thanks for your help,

Paul.

Roel said...

I just open the page and (when everything is loaded) I click on the second item: it shows up in the same browser window (replacing the store). When I navigate back and click on the first item (Axle wheel), then the zooming works fine. If I make a selection and another item is the first one, it only works for that first item.
I am using FF 3.0.16
IE 7 works the same as FF
Chrome works fine

HTH
Roel

Paul Brookes said...

Hi Roel/Martin,

I changed the way in which jQuery utilises FancyBox, so the upshot is that it should now work on older versions of FF.

I've tested on 3.0.17, but would appreciate it if you could retest.

Thanks,

Paul.

Roel said...

Hi Paul,

Now it works fine in my version of FF. Even in IE7, the popup works (although the shadow is a bid odd and there is no overlay, so I can still click 'inside' the store).

Good work!
Roel

Paul Brookes said...

Thanks Roel,

The weird shadow and overlay issues in IE should now be fixed.

Paul.