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.





[...] mooZoom es una aplicación desarrollada con MooTools que te permite integrar un zoom a tus imagenes con MooTools. En la demo podemos ver que haciendo uso de la rueda del ratón, podremos ampliar o reducir la imagen a la que apliquemos el estilo. [Demo][Descargar] Compártelo ← Montando Mini Posts en nuestro Blog [...]
[...] mooZoom una discreta aplicación desarrollada bajo MooTools que permite a todo usuario realizar acercamientos en las imágenes (zoom). El efecto zoom in/zoom out se produce mediante la utilización de la ruedita de nuestro ratón, y para descubrir contenido oculto una vez realizada la ampliación basta con arrastrarnos por la imagen. La utilización es muy sencilla, simplemente deberemos añadir la clase ” class=’moozoom’ ” a las imágenes y dar al menos una dimensión sea width o height – (ancho o altura). PLAIN TEXT HTML: [...]
[...] | Dale Zoom a tus imagenes mooZoom es una herramienta desarrollada bajo MooTools que permite a todo usuario aplicar un zoom [...]
[...] – bookmarked by 4 members originally found by coachrobbo on 2008-07-22 How to create a product viewer using mooZoom http://cssgallery.info/how-to-create-a-product-viewer-using-moozoom/ – bookmarked by 4 members [...]