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

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.

  • Josep Viciana
    Jul 14, 2008

    Amazing!

  • Cristian Nistor
    Jul 18, 2008

    Hi. Interesting and nice.

    I just have a little problem. It’s working well on demo page, but maybe just because too much zoom the image disappear, the black color background remains. This happened on FF3 with Ubuntu OS. I’ve tried first on zoom in and disappear and on the second time in zoom out disappear. Maybe a zoom limit will make things much clear.

    Regards and good luck

  • admin
    Jul 18, 2008

    @Cristian
    I think it’s a good idea. On the next release I think I will add a zoom limit feature as you suggested.
    Thank you.
    O zi buna ;)

  • Alex
    Jul 23, 2008

    Hi,

    I like your tool very much. Pretty cool and simple. Although I have the same problems like Christian + at a certain state of zooming I can’t drag the foto to the right.

    Anyway, looking forward for a fixed version!

    Best regards,

    Alex

  • admin
    Jul 23, 2008

    @alex
    thanks for your comment
    can you provide me a link to see what the problem is?
    or at least some more data – browser/os ?

  • Raj
    Aug 7, 2008

    HI…thanks really very nice script..i was searching for a script …i got moozoom…it works nicely imn mozilla but wen i tried in IE6..zooming was gng downwords not exactly to dat point.i read ur documentation and added the meta code in header part,still its not working correctly

  • admin
    Aug 7, 2008

    @raj
    the script is trying to bring the image closer to the original position on zoom out, to avoid an unwanted position when full zoomed out. So only on zoom in the image is zoomed in the point where the mouse is.

  • paul
    Aug 13, 2008

    hey

    great tool but if u are going to resize the browser is not going to work the image will stay in the same pozition.

    it’s not working as the description says: “mooZoom does not break the layout of the page ”

    i will try to patch it

    ps: i already converted to mootools 1.2 and added some features like zoom limit and coords for the visible area for backend image cropping

    thanx

  • admin
    Aug 13, 2008

    @paul
    thanks for the bug
    I will try do fix this
    related to v1.2 i have already 2 versions submitted by other users, but never had time to upload
    if you would like to provide your enhanced version, I will try as soon as possible to upload a working version ( maybe the best of those 3, maybe a collage ) and of course I will credit all of you.
    I am sorry I let mooZoom not updated but I really don’t have too much time :)

  • paul
    Aug 13, 2008

    @admin

    where should i send if?

    adresa de email office@rborn.info nu exista

  • admin
    Aug 13, 2008

    @paul
    well, it does exists,and I get spam on it :)
    anyway, try here

    dan[dot]tamas[at]gmail[dot]com

    and thanks

  • Tom
    Aug 23, 2008

    Very nice! Although there are a couple of things that could be improved.
    - how do you zoom in/out if you don’t have a mouse wheel?
    - it would be nice to have a bit more intuitive cursor design when having hovering over an zoomable image (so as to see that you can zoom in and out).

    But great stuff!

  • Raj
    Sep 10, 2008

    Nice tool but there is a problem, when i use it on simple dot net page it really working nice. But when i use master page with this tool it not working.
    Can u tell me how it work with master page?

  • Raj
    Sep 10, 2008

    Other thing When i use Ajax this tool again not working.

  • admin
    Sep 11, 2008

    @Raj

    I have to see to make an idea of what you got there. Send me a link where i can see what you are doing, and maybe I can help

  • Rich
    Sep 16, 2008

    Very nice feature! I’m not sure if we will be able to use it since we’re using Prototype which breaks MooZoom. (That might be Raj’s problem.)

    - How can I set zoom/position through JS call? I want to add a slider control to adjust zoom level. Thanks.

  • Rupen
    Sep 25, 2008

    Hi,

    Worked wonderfully! Thanks!

    However, I was wondering, has the functionality for +/- buttons to click for zoomin/zoomout been developed yet?

    Please let me know.
    Thanks

  • dude
    Oct 27, 2008

    I just tested your demo page, works fine in FF3 but doesn’t work in IE6 or IE7.

  • admin
    Oct 27, 2008

    @dude

    is working, if is on a local copy, maybe you made a mistake :)
    FF is pretty forgiving with js errors, but IE is not…

  • Dmitri
    Dec 1, 2008

    Hey there! Great job done with moozoom. But I found a problem, like paul’ve described. When resizing browser window, the pic would just stick to one spot, so you have to hit F5 or reload to bring it back.

    So, is there a patch for this happening and what is the v 1.2? Is the problem solved in this version?

  • Brian
    Dec 23, 2008

    I have four images on one HTML page that use the moozoom class. All of the images are of the same exact dimensions.Do you have any idea how I can make it such that when I zoom/pan on one of the images, it will zoom/pan to the exact location on the other images?

  • admin
    Dec 23, 2008

    Hi Brian
    If I understood well, you want some sort of sync between images. I think you will have to hack somehow the code, to make this. Maybe if you can show me a link I could give you some directions how to do this.

  • Nestis
    Mar 24, 2009

    Hi,

    Nice work, it´s exactly what I´ve been looking for.

    But I have a problem. I want to change the image displayed on the img tag, so through javascript and a button, I change the src tag. But the image dont change. If I dont use the moozoom class, it´s working (obviously :) ).

    Here the HTML code:

    And the Js code:
    document.getElementById(“nenufares”).src=”Nenufares.jpg”;

    Pretty simple, but it dont work.

    I´m not a javascript guru, in fact i´m such a newbie, but I tried to fire a window load event trying to get the moozoom class reload. But it didn´t work either.

    I dont know how to make it work.

    I explain the problem in a simple scenario. My scenario is a jsp app, and the image is updated with a servlet call from javascript. I dont explain it all, because i think isn´t relevant. If it´s necceary to explain it all, i´ll do it :)

    thanks in advance.

    PS: sorry for my incorrect and bad english, it´s not my mother languaje.

  • Nestis
    Mar 24, 2009

    i didnt see the XHTML options…here is the html code again

    div id=”imagen”
    img id=”nenufares” class=”moozoom” src=”CONANESLAPOLLA.jpg”
    / div

  • Jerry Nixon
    Apr 5, 2009

    I wonder. Could this (http://og5.net/christoph/article/A_better_Pagination) be used to add a zoom slider instead of the mouse wheel? Some mice don’t have wheels.

    Also, what about click to zoom? That’s some a normal-like feature that seems to be missing. How difficult?

    PS: great widget. I use it.

  • admin
    Apr 5, 2009

    @jerry
    you can modify moozoom without any problem if you wish to add any feature to it :)

    MooZoom evolved into Kroppr – that I think it might covers your needs.

  • Hitesh
    Jul 20, 2009

    please let us get some thing which could work with mootools 1.2 and smooth box

  • admin
    Jul 20, 2009

    @Hitesh
    You need to try to convert the script to moo 1.2
    Try to find what are the diffs between 1.11 and 1.2.x
    mainly I think you need to convert functions like
    setHTML(argument)
    to
    set('html', argument)
    , and so on

    I do not longer offer support for this, I’m sorry

  • vamsi
    Aug 13, 2009

    Hi,

    Thanks for u r code. I need zooming in a different way so that when i do right click it should zoom and on left click it should zoom out

    Please help me in doing this

  • admin
    Aug 13, 2009

    @vamsi
    Hi, I’m sorry but I do not offer support for this code anymore.
    This script has evolved into kroppr.

    Anyway, to do what you need, you can change the events from mousewheel to click and rightclick.

  • Kauhsik
    Jan 16, 2010

    Hi, i have the same problem as Nestis said, please help

    Nice work, it´s exactly what I´ve been looking for.

    But I have a problem. I want to change the image displayed on the img tag, so through javascript and a button, I change the src tag. But the image dont change. If I dont use the moozoom class, it´s working (obviously :) ).

    Here the HTML code:

    And the Js code:
    document.getElementById(”nenufares”).src=”Nenufares.jpg”;

  • admin
    Apr 5, 2010

    We updated the script to work with mootools v1.2.4 :)
    You can go to download it form here:
    http://www.rborn.info/blog/moozoom/

  • workaholic
    Apr 6, 2010

    Hello,

    How can I use this script with buttons (onclick event)

    I have this buttons:
    slide left button
    slide right button
    slide up button
    slide down button

    I just want control (zoom in/out, and slide) navigation with buttons. Can you help me for this?

  • admin
    Apr 6, 2010

    Well, you will need to modify the script to add the functions for this.
    Right now the script uses the mousewheel event for the zoom, and draggable to pan the zoomed image.
    A zoom in/out would be pretty easy to do, you need to duplicate the functionality of the zoom function, for each case( in or out)
    As for moving the you can alter the coordinates of it ( left, top ) on the click or mousedown event for each button.