MooTools 1.2 JavaScript image zoom

MooTools 1.2 JavaScript image zoom

Thursday, October 30th, 2008 in Mootools

image_zoom1 This image zoom script is developed having as inspiration the similar type of image zoom created in flash that usually displays a small thumbnail showing the region zoomed on it and a bigger image that displays the region showed on the thumbnail. I’ve seen this kind of approach used mainly on e-commerce shops that needed to present a more detailed image of a product.

This particular image zoom is developed using MooTools 1.2 and it’s just for demonstration purposes since I never needed such a script in any of my projects. Any help or suggestions on making it more robust would be very appreciated.

In order to work properly, the two images (the thumbnail and the corresponding large image) must be proportional in size. When moving the zoomed area on the thumbnail, the script calculates the position on the zoomed image that it should display so it’s very important that the dimensions are proportional. The two images are located in the pictures directory, into different folders: the thumbnail’s folder is pictures/thumb and the larger image is in pictures/big.

The JavaScript is structured as a class and all CSS styles are mainly external and can be maintained from the stylesheet.

Below you can find the CSS declarations:

#zoomer_big_container {
	display:block;
	position:relative;
	background:url(../images/loading.gif) center center no-repeat #FFFFFF;
	overflow:hidden;
	margin:10px auto 0px;
	cursor:move;
}
#zoomer_image {
	display:block;
	position:absolute;
}
#zoomer_thumb {
	display:block;
	position:relative;
	overflow:hidden;
	margin:10px auto 0px;
}
#zoomer_region {
	background:#666666;
	border:none;
	position:absolute;
	top:0px;
	left:0px;
	cursor:move;
}

The HTML is made of four lines of code (and I know I should have used a different approach here)

<div id="zoomer_thumb">
	<a href="path_to_big_image?phpMyAdmin=4c4c498620d2t7e9fd2f8" target="_blank"><img src="path_to_thumbnail" alt="" /></a></div>

The ‘big’ image loads into div#zoomer_big_container. After the image is loaded, the script sets the div width and height according to the dimensions of the thumbnail (x2, x3 …) and you can change this ratio by modifying this line into the JavaScript:

this.zoomSize = 2;

The value set above makes the container to have a dimension double the size of the thumbnail.

Because I encountered some problems with the browser cache, the thumbnail is also preloaded and the script starts only after the thumbnail is loaded.

The zoomed area can be updated by either moving the zooming region on the thumbnail or by dragging the zoomed image.

Was this useful? Show your support.

digg MooTools 1.2 JavaScript image zoom

43 comments

  1. David says:

    Hi, so the image of the football boot is not a demo? Is there a demo anywhere?

  2. Hi,

    The demo page is here: MooTools JavaScript image zoom
    At the end of the post you can find both links, to download and to view the demo.

  3. [...] MooTools 1.2 image zoom is a script that displays a thumbnail with a selected region in it which is magnified and showed next to the thumbnail. Besides the small image, the original image is needed. Both have to be proportional in size. For example, if the thumbnail has a size of 100 x 300, the big image has to have a size of 400 x 1200 or similar (the ratio should be kept). The JS file is structured as a class and all CSS styles are mainly external. [...]

  4. roweb says:

    Neat, really nice feature! The result is excellent.
    Is there a simple way to make the ‘zoom’ square automatically follow the pointer
    instead of dragging it? Thanks :o)

  5. This class is based on the MooTools Dragg class. Simple change to make it work with mouseOver? I don’t think so but I don’t know for sure. I’ll have to look into it, but for the moment I don’t have the time. I’m sorry. I’ll post any updates I make to this script here. Thanks for your suggestion.

  6. roweb says:

    Sure, thank you :)

  7. Tahmina Khatoon says:

    Its really nice.
    Thank you very much.

  8. [...] particuliarement, car il permet une utilisation très intuitive pour l’internaute. Demo | Le site des développeurs | [...]

  9. acai2046 says:

    For example: http://www.360buy.com/product/153256.html
    # zoomer_region follow the mouse, and can hide show

  10. rabia says:

    thanx…..its working perfect

  11. Shalini says:

    I am looking for a functionality to zoom the scanned images(which can be in .tiff,.jpeg etc).
    Please let me know if there is any java script functionality or plugins in or freewares in order to achieve this.
    Also the script in the site did not work the similar was as in the demo.Am I missing something? Please help.

    • About other free scripts… I really don’t know. Maybe someone else around here might know and share the info with you. About the script not working as expected… I can’t know what’s wrong until I see at least a demo page or implementation. If you have a link where you tried to implement the script, I’ll gladly give it a look.

  12. [...] on the Mooltools JS framework, Mootools Image Zoom attempts to mimic zoom effect we see in Flash applications. It works by assigning a thumbnail of [...]

  13. [...] on the Mooltools JS framework, Mootools Image Zoom attempts to mimic zoom effect we see in Flash applications. It works by assigning a thumbnail of [...]

  14. bolox says:

    Hi,
    This script work also in FF but I fixed it in two step :

    Put “top:0px; left:0px;” in
    #zoomer_image { display:block; position:absolute;z-index:10;}

    Drag.class doesn’t work well if the object to drag is an image; so I transform it into a div :
    in ImageZoom.js, at line 24 transform :

    id:’zoomer_image’,
    onload: function(){
    this.bigImage.inject(‘zoomer_big_container’);

    into :

    onload: function(){
    new Element(‘div’, {
    id:’zoomer_image’,
    styles: {
    ‘width’: this.bigImage.width,
    ‘height’: this.bigImage.height,
    ‘background’ : ‘url(‘+ this.thumb_url.get(‘href’) +’)’

    }
    }).injectInside(‘zoomer_big_container’);

    I hope this fix will help you :)
    Scuse for my poor english ^^

  15. sharky says:

    Excellent script, but I have problems opening it with IE 8. Do you have any idea how to fix it ?

  16. Patrick says:

    Is your MooTools zoom distributed under any kind of license? I am curious what the stipulations are for non-profit use of the javascript.

  17. __MaX__ says:

    Hi Constantin,

    I’m implementing your script on a project, and i’m actually noticing a little issue on every internet explorer versions.

    The drag for the region works perfectly, clicking, dragging, releasing, everything works fine.

    But on the zoomed picture, You have to click and stay clicked, drag a little… the forbidden symbol appear, and then when you release the drag is stuck on your cursor. You have to click again to disable the drag.

    I tried your demo to see if it was my implementation, it has the same bug. Even one bug i don’t have : if you start by dragging the big picture, a ton of error is triggered.

    Have you ever experienced this issue, and if so, have you find any fix ?

  18. __MaX__ says:

    Umh, actually, i just fixed the issue… don’t know why i didn’t thought about this fix earlier.

    A few days ago, i tried to implement a div around the dragged picture (the zoomed one)… the issue was still there. So after a big cup of coffee this morning, i thought about trying the same thing with but with no img tag and a background style on the div.

    Its works fine on firefox / chrome and now Internet explorer… i made radical changes to your script, if you want it someday, don’t hesitate to contact me.

  19. __MaX__ says:

    No prob, that’s the least i can do when someone is releasing a good script like that. :)

    You can see the modified version of your script here : http://www.akelakey.com/en/spring-summer.html

  20. Ernesto says:

    Hi Constantin,
    Nice code! Perfect for what I need to do. I want to allow people to zoom on areas of a network I am posting in my webpage. It is for educational purposes. Can I just change the pictures, edit the text and use the code?
    Thanks!
    Ernesto

  21. Pascal says:

    Hi Constantin,
    Very nice script! But i came across a problem: I need it for multiple pictures on the same page, and i cant figure out how to do this. It only works with the first picture, but not with the second or third… Have you any idea how I can make it work for more than one picture?
    Thank you very much in advance!!!!!!
    Pascal

    • Sorry about this but the script currently works with a single image. I made it some time ago but since little interest was for this script, I didn’t updated it. Maybe it’s time to do it now but when exactly I really can’t tell.

  22. Jan says:

    I´m also interested in te update. Would be awesomeif the big image appears only if you start clicking the thumbnail, like in jqzoom.

    • I am planning the update. Unfortunately I can’t tell exactly when this will happen. I’ll try and take into account all suggestions from comments. Sorry that I can’t clearly tell when the update will happen, for the past months I was involved into a project and it looks like it will take some more time to get it done. Hope you can understand.

  23. [...] on the Mooltools JS framework, this script attempts to mimic zoom effect we see in Flash applications. It works by assigning a thumbnail of [...]

  24. Chris says:

    this script is not working in IE, can someone post the updated version or a fix please

  25. XTC says:

    Does not work – just a black box – useless!

    • Note than this script was developed for mootools 1.2. An updated version can be found here: Zoomit – mootools and jQuery zoom script
      If you ever feel the need to comment here, a more productive approach (instead of simply saying it’s junk) is to provide some information on how you installed the script and the errors you get. It helps most times more than just throwing trash like that. Script has almost 10.000 downloads, makes you wonder why would people get something that shows only a black box :)

  26. komang says:

    hi Constantin Boiangiu,

    thanks for the great script, is it possible to make the image start drag from right to left (the default from left)
    if yes,which part of the script should i change.

    Thanks a lot for the help

Leave a comment