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

Lightweight Image Inner Zoom Plugin with jQuery and Canvas - Image Zoomer
File Size: 125 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.