Simplest jQuery Image Zoom & Pan Plugin - Image Cursor Zoom

File Size: 7.17 KB
Views Total: 5062
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simplest jQuery Image Zoom & Pan Plugin - Image Cursor Zoom

Image Cursor Zoom is a dead simple jQuery plugin which allows for zooming and panning an image within a specific container.

How to use it:

1. Place jQuery library and the jQuery image cursor zoom plugin at the end of the document so the page loads faster.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="src/jquery.imagecursorzoom.js"></script>

2. Call the imageCursorZoom() method the img tag. This allows you to zoom in the image on click within the whole page.

$('img').imageCursorZoom();

3. Zoom in the image within a specific container.

<div class="box" >
  <img class="box" src="1.jpg">
</div>
$('img.box').imageCursorZoom({parent:function(){ return $(this).parent(); }});

Change log:

2016-06-21

  • +browserify compatible

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