CSSgallery.info

07 2008

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 - a mootools class for zooming images

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.


4 Responses to “How to create a product viewer using mooZoom”

  1. […] 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 […]

  2. […] 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: […]

  3. […] | Dale Zoom a tus imagenes mooZoom es una herramienta desarrollada bajo MooTools que permite a todo usuario aplicar un zoom […]

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

Leave a Reply

« Lighttpd install perl, mysql support in chrooted jail Mootools off-line documentation »