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.
4 Responses
[...] 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 [...]