mooZoom: a mootools class for zooming images – not maintained anymore

July 2nd, 2008

moozoom

mooZoom is a Mootools script that allows you to zoom an image in page without breaking the layout. Using only the mouse, the scroll wheel will zoom-in / zoom-out in the point you desire to see. When zoomed in, the image can be dragged to see hidden parts of it.

The script is unobtrusive and requires only to set the attribute class="moozoom". Anyway, this will not prevent you to add your own classes to the image, so class="moozoom my_class" will still work.

To use the class, you have to add the Mootools framework to your page ( version 1.11 or version 1.2.4 ) and moozoom.js, both available for download.

Moozoom demo:

Demo page is here

Usage:

In your header zone add
<script type="text/javascript" src="js_folder_path/moozoom.js"></script>

assuming that you already have the Mootools library loaded, add class="moozoom" to the image you want to be zoomable

<img src="flower.jpg" class="moozoom" />

and you are done.

Moozoom browser support

  • IE6 – for IE6 you should add the next code in the header zone of your page in order to remove the image toolbar, and avoid some ugly flickering that this will provoke on zooming:
    <meta http-equiv="imagetoolbar" content="no">
  • IE7
  • IE8
  • Opera 9.50, Opera 10.10
  • Safari 3.0.3, Safari 4
  • Firefox 2.0.0.14, Firefox 3.6
  • Camino 1.6.1, Camino 2

Todo list:

We will try as soon as possible to make the class available for mootools v1.2, then add some enhancements to it.
Update 2010: We did the class for Mootools v1.2 so please go to the product’s page and download it.

Update 2012: We no longer work on mooZoom, we don’t offer support or updates anymore. It’s been an adventure that has ended since we are not working with Mootools anymore, but switched to mobile development with Titanium Appcelerator.