imageMagnifierv0.65 Oct 15, 2021

Interactive Magnifier of Images

Introduction
Example 1 – Easiest Method
Example 2 – Simple Script
Example 3 – Swapping Images with Magnifiers
Options
Example 4 – Constructing a Magnifier with a Script
Example 5 – Retrofitting Existing Web Pages
Example 6 – Retrofitting Other Image Magnifiers
Example 7 – Advanced Usage

Introduction

I have looked at several image magnifiers over the last couple of years and have ended up making one for myself. I mostly want a magnifier that:

worked well with a touch-pad device,
would freeze and unfreeze when I clicked on the magnifier,
would be able to drag and drop the magnifier to a different location on the image,
and be easy to setup and use.

The imageMagnifier() addon to jQuery is what I came up with. It looks nice, is simple to use, feature rich, and can be used in a variety of situations.

The imageMagnifier() method uses a high resolution image corresponding to the image displayed on a page to produce a magnified portion of that image. Therefore, a large high resolution image needs to be specified for the imageMagnifier() to work.

But does it work well with touch-pad devices? It's better, but no, not really. It's hard to beat the pinch-zoom operation. I hope to figure a way to substitute the high-res image for the low-res image when the zoom gets to a certain level but that's a problem for another day or another person.

This work is licensed under the MIT License.

Examples

Example 1 – Easiest Method

The easiest way to use imageMagnifier() is to specify the large image's url in a data-largesrc attribute to the <img> tag like the following:

Demo

<!DOCTYPE html>
<html>
<head>
<title>imageMagnifier example - Easiest Method</title>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="jquery.imageMagnifier.js"></script>
</head>
<body>
<img src="images/image.jpg" data-largesrc="images/image-large.jpg" alt="Image with a magnifier" />
</body>
</html>

Note: if you do not want this behavior of the imageMagnifier script searching all the <img> tags for data-largesrc attributes, set jQuery.imageMagnifier.autoinit = false;

Example 2 – Simple Script

Another way is to identify the large image's url as the first parameter to the imageMagnifier() method.

Demo

<!DOCTYPE html>
<html>
<head>
<title>imageMagnifier example - Simple Script</title>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="jquery.imageMagnifier.js"></script>
<script>
jQuery(function($) {
	$('#example').imageMagnifier('images/image-large.jpg');
});
</script>
</head>
<body>
<img id="example" src="images/image.jpg" alt="Image with a magnifier" />
</body>
</html>

Example 3 – Swapping Images with Magnifiers

The third way of using imageMagnifier() is to use it to programmatically change an image to a different image with a different large image shown in the magnifier.

Demo

<!DOCTYPE html>
<html>
<head>
<title>imageMagnifier example - Swapping Images with Magnifiers</title>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="jquery.imageMagnifier.js"></script>
</head>
<body>
<div>
<button onclick="jQuery('#example').imageMagnifier('images/image1.jpg','images/image1-large.jpg')">Image #1</button>
<button onclick="jQuery('#example').imageMagnifier('images/image2.jpg','images/image2-large.jpg')">Image #2</button>
<button onclick="jQuery('#example').imageMagnifier('images/image3.jpg','images/image3-large.jpg')">Image #3</button>
</div>
<img id="example" src="images/image1.jpg" data-largesrc="images/image1-large.jpg" alt="Image with a magnifier" />
</body>
</html>

Options

The last argument to imageMagnifier() can be an object of option settings that override the default options in jQuery.imageMagnifier.options. For example, to specify your own image to be displayed when pictures are loading, do the following:

<script>
$('#example1').imageMagnifier('images/image1-large.jpg',{loader: {image: 'images/animated-loader.gif'} });
</script>

You can also set options globally:

<script>
$.imageMagnifier.options.loader.image = 'images/animated-loader.gif';
$.imageMagnifier.options.magnifier.width = 120;
$.imageMagnifier.options.magnifier.height = 120;
</script>

Example 4 – Constructing a Magnifier with a Script

Using the options to imageMagnifier() you can create an image and magnifier from scratch in your script.

Demo

<!DOCTYPE html>
<html>
<head>
<title>imageMagnifier example - Constructing a Magnifier with a Script</title>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="jquery.imageMagnifier.js"></script>
<script>
jQuery(function($) {
	$('<img/>').imageMagnifier({
		image: 'images/image.jpg',
		magnifier: {
			image: 'images/image-large.jpg',
			width: 200,
			height: 200
		},
		loader: {
			image: 'images/loader.gif'
		}
	}).parent().appendTo('#container');
});
</script>
</head>
<body>
<div id="container">
</div>
</body>
</html>

Note: imageMagnifier() wraps its image with a bounding <div> so when adding a dynamically created image to the document, you should add the image's parent element to the target.

Example 5 – Retrofitting Existing Web Pages

This example is for those of us who name and organize our large images so that they can be automatically determined from the source image's url. By defining the option "largesrc" to be a function that returns a large image's url given a source image's url, an image magnifier can be setup so that the magnifier will automatically change whenever the image's src url changes. This makes it very easy to retrofit existing web pages with image magnifiers as shown in the following example:

Demo

<!DOCTYPE html>
<html>
<head>
<title>imageMagnifier example - Retrofitting Existing Web Pages</title>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="jquery.imageMagnifier.js"></script>
<script>
jQuery(function($) {
	$('#example').imageMagnifier({largesrc: function(src){ return src.replace(/\.jpg/,'-large.jpg'); }});
});
</script>
</head>
<body>
<div>
<button onclick="document.getElementById('example').src = 'images/image1.jpg'">Image #1</button>
<button onclick="document.getElementById('example').src = 'images/image2.jpg'">Image #2</button>
<button onclick="document.getElementById('example').src = 'images/image3.jpg'">Image #3</button>
</div>
<img id="example" src="images/image1.jpg" alt="Image with a magnifier" />
</body>
</html>

Example 6 – Retrofitting Other Image Magnifiers

Other image magnifiers need the big image to be the destination of the image's surrounding link. It's a common method that's nice because the large image is still available to the user even if JavaScript is not running. To setup imageMagnifier on images structured like this, set the largesrc option to be a function like the following:

Demo

<!DOCTYPE html>
<html>
<head>
<title>imageMagnifier example - Retrofitting Other Image Magnifiers</title>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="jquery.imageMagnifier.js"></script>
<script>
jQuery(function($) {
	$('#example').imageMagnifier({largesrc: function(){ return $(this).closest('a').attr('href'); }});
});
</script>
</head>
<body>
<a href="images/image-large.jpg">
 <img id="example" src="images/image.jpg" alt="Image with a magnifier" />
</a>
</body>
</html>

Note: we used the .closest('a') method to find the image's surrounding <a> tag instead of .parent(). Simply using .parent() will not work because imageMagnifier() surrounds the image tag with a <div> tag when it sets up an image with a magnifier. Using .parent().parent() would work.

Example 7 – Advanced Usage

This version of imageMagnifier was developed for a company's portal where workers focus on parts of an image for illustrating quality features and flaws.

The image magnifier(s) can be turned on or off. The initial location where the magnifier should be focused can be specified and you can define callback functions which are executed when the user clicks the mouse or presses a keyboard key.

Demo

<!DOCTYPE html>
<html>
<head>
<title>imageMagnifier example - Advanced Usage</title>
<script src="//code.jquery.com/jquery-latest.js"></script>
<script src="jquery.imageMagnifier.js"></script>
<script type="text/javascript">
jQuery(function($) {
	$.imageMagnifier.autoinit = false;
	$.imageMagnifier.enabled = false;

	var common_options = {
		magnifier: {
			cursor:'crosshair'
		},
		largesrc: function(src) {
			return src.replace(/\.jpg/,'-large.jpg');
		},
		callback: function(img,largeimg,event) {
			// Do something only if CTRL key is pressed.
			if (event.ctrlKey) {
				alert('image: top='+img.top+', left='+img.left+'\nlarge image: top='+largeimg.top+', left='+largeimg.left);
			}
		},
		callbackKeyDown: function(img,largeimg,event) {
			switch (event.which) {
			case 17: return;	// ignore CTRL key
			default:		// display key code and coordinates
				$('<span/>')
				.css({display:'block','font-size':'80%','margin-left':'12px'})
				.text('keycode: '+event.which+' image ('+img.top+','+img.left+') large image: ('+largeimg.top+','+largeimg.left+')')
				.appendTo($(this).parent().parent());	// image -> imageMagnifier_container -> inline-block
			}
		}
	};

	$('#example1').imageMagnifier( $.extend(true,{},common_options,{magnifier:{top:104,left:162}}) );
	$('#example2').imageMagnifier( $.extend(true,{},common_options,{magnifier:{top:103,left:60}}) );
	$('#example3').imageMagnifier( $.extend(true,{},common_options,{magnifier:{top:132,left:20}}) );

	$('#onoff').click(function() {
		var $this = $(this);
		if($this.text().match(/On/)) {
			$.imageMagnifier.enable();
			$this.text($this.text().replace(/On/,'Off'));
		}
		else {
			$.imageMagnifier.disable();
			$this.text($this.text().replace(/Off/,'On'));
		}
	});
});
</script>
</head>
<body>
<p><button id="onoff">Turn Magnifiers On</button></p>
<p>Try pressing any key while moving the magnifier. Try pressing the CTRL key when clicking the magnifier into position.</p>
<div id="container">
<div style="display:inline-block;vertical-align:top;width:295px"><img id="example1" src="images/image1.jpg" style="width:175px;padding:50px;border:solid #aaa 10px;background:#f6f6f6;"/></div>
<div style="display:inline-block;vertical-align:top;width:295px"><img id="example2" src="images/image2.jpg" style="width:175px;padding:50px;border:solid #aaa 10px;background:#f6f6f6;"/></div>
<div style="display:inline-block;vertical-align:top;width:295px"><img id="example3" src="images/image3.jpg" style="width:175px;padding:50px;border:solid #aaa 10px;background:#f6f6f6;"/></div>
</div>
</body>
</html>