This is a test of the MojoMagnify Javascript Image Magnifier script originally posted here.
Move the mouse over the images to see it in action. The first image uses a larger version to get a magnification effect, the second image uses a b/w and a color version of the same image (the same size) to get another 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 MojoZoom Image Zoom script.

Download

Current version: 0.1.10
Download files: mojomagnify.zip

MojoMagnify is free and licensed under the MIT license. However, if you want to support the development of MojoMagnify 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="mojomagnify.js"></script>
<link type="text/css" href="mojomagnify.css" rel="stylesheet" />

<!-- Step 2: the custom 'data-magnifysrc' attribute specifies the source of the large image-->
<img src="kendwa_small.jpg" data-magnifysrc="kendwa_big.jpg" id="myimage" />

<!-- the custom 'data-magnifysrc' attribute specifies the source of the other image -->
<img src="roskilde_bw.jpg" data-magnifysrc="roskilde_color.jpg" id="myimage2" />

You can also add the magnifier effect dynamically with JavaScript using the MojoMagnify.makeMagnifiable function.

// The makeMagnifiable function lets you add the effect with JavaScript.
MojoMagnify.makeMagnifiable = function(image, source) {
	// image 	= the image element you want to add the effect to
	// source	= the source of the high res version of the image
}

// Example (using the image from above): 

MojoMagnify.makeMagnifiable(
	document.getElementById("myimage2"), 
	"kendwa_big.jpg"
);

Known issues

Padding and borders on the target image may give unexpected results if you don't set the border/padding for the zoomed image as well (in mojomagnify.css)

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