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 mootools framework to your page ( version 1.11 or version 1.2.4 ) and moozoom.js, both available for download.

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.

We tested the class in the next browsers:

• 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

To do:

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

Bugs:

Feel free to report bugs when you encounter them, posting as comments here.