How to create a product viewer using mooZoom

There are cases when we need to show a zoomed image of a product ( or something else ), that require to be as much as user friendly as possible. One of the cases are e-commerce sites that use high quality images for high impact over the client’s mind (jewelery for example).

In this case zooming a particular point ( but arbitrary chosen by visitor/client ) would be very useful, but without forcing it to leave the page, or hide some page controls – maybe buy button – like a “lightbox” script would do.

So we created mooZoom.

mooZoom is unobtrusive and allows a visitor to zoom an image in a very friendly way – just scroll the mouse in a desired point.

The image will zoom in/zoom out, depending on the direction of the wheel.  In a zoomed stage a simple drag will reveal the hidden part of the image.

The setup is ultra easy – you just need to add " class='moozoom' " to the zoomable images and give at least one dimension – width or height.

something like this:

<img class=”moozoom” src=”flower.jpg” alt=”mooZoom” style=”width:200px;”>

and mooZoom will take care of the rest. You will  also need mootools v1.11. (a script for v1.2 will be available as soon as possible)

We setup here a small demo, making a nice frame for a virtual product presentation.

There is always room for improvements  so if you have any suggestion  or found a bug  don’t hesitate to comment here.