MooTools 1.2 JavaScript image zoom
Thursday, October 30th, 2008 in Mootools
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | #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)
1 2 | <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:
1 | 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.
Related posts
Was this useful? Show your support.
16 comments
Hi, so the image of the football boot is not a demo? Is there a demo anywhere?
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.
[...] 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. [...]
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
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.
Sure, thank you
Its really nice.
Thank you very much.
[...] particuliarement, car il permet une utilisation très intuitive pour l’internaute. Demo | Le site des développeurs | [...]
For example: http://www.360buy.com/product/153256.html
# zoomer_region follow the mouse, and can hide show
thanx…..its working perfect
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.
[...] 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 [...]
[...] 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 [...]
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 ^^
Hi,
What exactly was the problem with FF? I’m looking at the demo in FF 3.5.8 and works fine. What version did you tested on?
Leave a comment