Lightweight Image Inner Zoom Plugin with jQuery and Canvas - Image Zoomer

Image Zoomer is a jQuery plugin for creating a direction-aware magnifying glass effect to provide an inner zoom functionality on a given image. Works on modern browsers and IE9+ that support Html5 canvas element.

How to use it:

1. Include the jQuery javascript library and the jQuery image zoomer plugin in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="javascripts/image_zoomer.js" type="text/javascript"></script>

2. Call the plugin on an image.

$("img").each(function() {
    $(this).image_zoomer();
});

3. That's it. You can customize the width, height and scale of the zoom lens.

var options = {
height: 90, 
width: 90,
scale: 1.5
};
$("img").each(function() {
    $(this).image_zoomer(options);
});

Change log:

2014-06-27

• Bug fixed.

2014-06-26

• Stopping event bubbling and propagation

2014-06-25

• Bugs fixed.

2014-06-23

• Fixed a bug: Zoom is not correct if image has width and height CSS properties set

---

This awesome jQuery plugin is developed by ilatif. For more Advanced Usages, please check the demo page or visit the official website.