There are moments when we need to show a zoomed image of a product (or something else) that requires to be as much as user friendly as possible. An example is 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.2

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.

No related posts...yet