MojoZoom - Free JavaScript Image Zoom

This is the demo page for the free MojoZoom Javascript Image Zoom script.
Move the mouse over the images to see it in action. In addition to adding the zoom effect, the image is also automatically made to link to the high res version (if the image is not already a link). Check the blog if you have any comments or are looking for more JavaScript experiments.

Also check out the related MojoMagnify Image Magnification script.

Download

Current version: 0.1.6
Download files: mojozoom.zip

MojoZoom is free and licensed under the MPL license. However, if you want to support the development of MojoZoom and the other projects found here, you can use the button to the right to donate whatever you feel is appropriate.

Example usage

<!-- Step 1: include the JavaScript and CSS files  -->
<script type="text/javascript" src="mojozoom.js"></script>
<link type="text/css" href="mojozoom.css" rel="stylesheet" />
<!-- Step 2: add the custom 'data-zoomsrc' attribute to your image to specify the source of the large image -->
<img src="kendwa_small.jpg" data-zoomsrc="kendwa_big.jpg" id="myimage" />

By default, a 256x256 square is shown to the right of the image with the zoomed portion of the image as in the example below.

Alternatively, you can create your own element to hold the zoomed portion. Just give the element the id "<id_of_image>_zoom" and you're set. This way you're in full control of where the zoomed image appears. The dimensions of the marker on the normal image are determined by the size of the zoom portion element.

You can also choose to display the zoomed portion always, without it being hidden/shown by mouseover/mouseout events. To do this, use set the "data-zoomalwaysshow" attribute to "true" or use the appropritate argument when calling the JavaScript function (see below).
<div id="myimage2_zoom" style="position:relative;width:150px;height:300px;float:right;border:1px solid black;right:50px;"></div>
<img src="kendwa_small.jpg" data-zoomsrc="kendwa_big.jpg" data-zoomalwaysshow="true" id="myimage2" style="padding:0px;border:0px;" />

Or perhaps you prefer the zoom image to the left?
<div style="position:relative;float:left;width:150px;height:300px;margin-right:50px;" id="myimage4_zoom"></div>
<div style="float:left;"><img src="kendwa_small.jpg" data-zoomsrc="kendwa_big.jpg" data-zoomalwaysshow="true" id="myimage4" /></div>

Last, if you want to add the zoom effect dynamically with JavaScript, use the MojoZoom.makeZoomable function.

// The makeZoomable function lets you add the effect with JavaScript.
MojoZoom.makeZoomable = function(image, source, zoomElement, zoomWidth, zoomHeight, alwaysShow) {
	// image 	= the image element you want to add the effect to
	// source	= the source of the high res version of the image
	// zoomElement = optional element to hold the zoomed portion. If not specified, a default 256x256 square is created.
	// zoomWidth	= optional width of zoomElement
	// zoomHeight	= optional height of zoomElement
	// alwaysShow	= if true, the high res image will always be displayed, regardless of mouseover/out events.
}

// Example (using the image and zoom element from above): 

MojoZoom.makeZoomable(
	document.getElementById("myimage2"), 
	"kendwa_big.jpg",
	document.getElementById("myimage2_zoom"),
	150, 300,
	true
);



Known issues:
  • Padding and borders on the target image may give unexpected results. With small (1px) borders the problem is barely noticeable, though.

  • Thanks to Giuseppe at extrowebsite.com, there is also an Italian translation of the information found here.
     


    Copyright 2008-2009 Jacob Seidelin - Privacy Policy - Some icons by Bruno Maia, IconTexto