ZoomIt – JavaScript image zoom for MooTools and jQuery

ZoomIt – JavaScript image zoom for MooTools and jQuery

Monday, May 30th, 2011 in jQuery, Mootools

ZoomIt - JavaScript image Zoom for MooTools and jQuery ZoomIt is a JavaScript image zoom developed for MooTools 1.3 (1.2 compatible) and jQuery that allows display of detailed, large images based on smaller images that can be placed into the context of web pages. A new approach, different from the previous one (that can be seen here) allows easier placement and implementation along with possibilities of styling using CSS classes placed in stylesheets. The two script versions (for jQuery and MooTools) offer the very same functionality so whatever your preference, you get the same thing no matter what JavaScript framework you use.

The script allows mouse events customizations meaning that the zooming process can be started on either click or mouse movement over the thumbnail image. Also, moving the zoomed area can be set to work with drag or mouse movement over the image. The big image that displays the details has a loader CSS class on it that is available as a parameter (allowing to customize the loader in any way you want) and it also has “memory” capability, meaning that at a later time the user zooms the image, the previous position will be displayed by default. The script works well in all major browsers (Firefox, Safari, Chrome, Opera) with the latest versions. Older browser versions haven’t been tested but it shouldn’t be a problem with them (in case there is, please leave a comment below).

Parameters

There are 12 parameters that can be set and 2 Events (start of zoom and ending of zoom). The parameters are:

  1. container (MooTools only): optional parameter that tells the script into what element to scan for elements that will have zoom capability. If this parameter isn’t set, by default the script will scan the whole body;
  2. elems: required parameter that contains the selector CSS class for the elements to have zoom applied to them (ie: .zoomImages);
  3. mouseEvent: the event that will trigger the zoomed image to be displayed. Can have as values either click, mouseenter or mouseover;
  4. multiplier: this parameter determines the size of the zoomed image area. You can use any number here and the size of the zoomed area will be multiplier*thumbnail image size. This means that if your thumbnail is 150 x 150 px, a multiplier of 1 will display a zoomed image of 150 x 150. Decreasing this value will make the size of the zoomed image smaller, increasing it will make it bigger;
  5. zoomPosition: by default there are only 4 positions available: top, left, right, bottom. This is the position where the zoomed image will be displayed in relation with the thumbnail image;
  6. zoomDistance: this parameter controls the distance between the zoomed image and the thumbnail. A value of 0 will display the zoomed image right next to the thumbnail image;
  7. zoomClass: if you want to add additional styles to the container having the zoomed image inside it, set this parameter with a CSS class (ie: myExtraStyles) and in your stylesheet add this class with the CSS rules you want applied to it;
  8. zoomLoadingClass: similar to the parameter above but it applies only when loading the big image;
  9. zoomAreaClass: like zoomClass but it applies to the small zoomed area from the thumbnail image;
  10. zoomAreaColor: the background color of the small zoomed area;
  11. zoomAreaOpacity: the opacity of the small zoomed area;
  12. zoomAreaMove: what mouse event should change the position of the zoomed image (can be drag or mousemove).

The 2 events the script fires are onZoom (for jQuery just zoom) and onClose (for jQuery just close). They get fired when the image zooming process starts and ends and they return the element being zoomed.

Instalation

1. MooTools

The MooTools version of the script uses MooTools core and from more version you will need Assets and Drag. As usual, first thing to do is add the stylesheet and the JavaScript files needed into the document header section:

1
2
3
4
<link rel="stylesheet" type="text/css" href="zoomit.css" />
<script language="javascript" type="text/javascript" src="script/mootools-core-1.3.2-full-compat-yc.js"></script>
<script language="javascript" type="text/javascript" src="script/mootools-more-1.3.2.1-drag-assets.js"></script>
<script language="javascript" type="text/javascript" src="script/zoomit-mootools.js"></script>

Once that is done, the only thing left to do is start the script. To do that, put this into the document header:

1
2
3
4
5
6
7
<script language="javascript" type="text/javascript">
	window.addEvent('load', function(){
		new ZoomIt({
			elems: '.zoomIt'
		});
	});	
</script>

The example above starts the script by simply specifying the elements the have zoom on them. Please note that the window event is load, not domready. You need to use load event to make sure the image dimension is correct when MooTools scans the page and tries to determine the exact image size. You can complete the list with the rest of parameters according to your own implementation. Last step implementing the script is to put the HTML into page:

1
<a href="pictures/1.jpg" class="zoomIt" title="My zoomed image"><img src="pictures/tn_1.jpg" alt="Some alt text here" /></a>

To sum up everything, you will end up with a page looking more or less like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ZoomIt MooTools</title>
<link rel="stylesheet" type="text/css" href="zoomit.css" />
<script language="javascript" type="text/javascript" src="script/mootools-core-1.3.2-full-compat-yc.js"></script>
<script language="javascript" type="text/javascript" src="script/mootools-more-1.3.2.1-drag-assets.js"></script>
<script language="javascript" type="text/javascript" src="script/zoomit-mootools.js"></script>
<script language="javascript" type="text/javascript">
	window.addEvent('load', function(){
		new ZoomIt({
			elems: '.zoomIt'
		});
	});	
</script>
</head>
 
<body>
<a href="pictures/1.jpg" class="zoomIt" title=""><img src="pictures/tn_1.jpg" alt="" /></a>
</body>
</html>

2. jQuery

Similar to the MooTools way of implementation, first thing is to set up the framework files and script into the header section:

1
2
3
4
<link rel="stylesheet" type="text/css" href="zoomit.css" />
<script language="javascript" type="text/javascript" src="script/jquery-1.6.min.js"></script>
<script language="javascript" type="text/javascript" src="script/jquery-ui-1.8.12.custom.min.js"></script>
<script language="javascript" type="text/javascript" src="script/zoomit-jquery.js"></script>

Second, you need to fire up the script:

1
2
3
4
5
<script language="javascript" type="text/javascript">
	jQuery(window).load(function(){		
		jQuery('#zoomItImages').zoomIt();
	});
</script>

Again, same as the MooTools example, you need to use the load event jQuery provides for window to start the script. Do not use $(window).ready because the script won’t be able to determine the correct image size of the thumbnails. Also, feel free to complete the implementation parameters with whatever values you have in mind (see parameters above).

Next step is to set up the HTML for the script. As you can see into the piece of code above, we start the script by attaching it to element with ID zoomItImages. This means that you need a container for the anchors containing images:

1
2
3
<ul class="images" id="zoomItImages">
    	<li><a href="pictures/1.jpg" class="zoomIt" title=""><img src="pictures/tn_1.jpg" alt="" width="150" height="94" /></a></li>
</ul>

I used a list element but you can use any other type of element (div for example), it’s only a matter of taste.

Was this useful? Show your support.

digg ZoomIt – JavaScript image zoom for MooTools and jQuery

1 comment

  1. darki777 says:

    Hi,
    first, thank u a lot for the zoomit.js script, its very usefull to me, but i did some optimizations on your script if u dont mind (u will find the code below).

    Because i found it neccessary to change the X and Y Axis separately from each other. So u can choose a inversely proportional Zoom of the big Picture. It was very usefull on one of my sites, so i hope u can update it on your site if its good enough for u ;) Have a good day :)

    The source Code and the minimized Code:
    http://pixelmount.com/test/zoomit.js
    http://pixelmount.com/test/zoomit.min.js

    Best regards,
    Pixelmount aka darki777

Leave a comment