mooZoom: a mootools class for zooming images – not maintained anymore
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:
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.
-
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
-
@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
-
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
-
@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 ? -
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
-
@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. -
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
-
@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
well, it does exists,and I get spam on it
anyway, try heredan[dot]tamas[at]gmail[dot]com
and thanks
-
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!
-
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? -
Other thing When i use Ajax this tool again not working.
-
@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
-
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.
-
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 -
I just tested your demo page, works fine in FF3 but doesn’t work in IE6 or IE7.
-
@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… -
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?
-
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?
-
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. -
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.
-
i didnt see the XHTML options…here is the html code again
div id=”imagen”
img id=”nenufares” class=”moozoom” src=”CONANESLAPOLLA.jpg”
/ div -
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.
-
@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.
-
please let us get some thing which could work with mootools 1.2 and smooth box
-
@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 onI do not longer offer support for this, I’m sorry
-
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
-
@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.
-
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”; -
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/ -
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 buttonI just want control (zoom in/out, and slide) navigation with buttons. Can you help me for this?
-
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.
Amazing!