Minimal jQuery Image Inner Zoom & Pan Plugin - zizoom

zizoom is an extremely lightweight jQuery plugin used for enabling a basic magnifying glass effect on an images. Hover over (or Click on) the thumbnail you will see a zoomed image within the original container and then you can explore part of the image with mouse move.

Basic usage:

1. Include jQuery library and the jQuery zizoom plugin on the html page.

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

2. Add the thumbnail and large images to your webpage.

<div class="photo" data-zoom="large.jpg" >
  <img src="small.jpg" alt="Photo must be zoomed" >
</div>

3. Active the zooming and panning functionalities on the image.

$('.photo').zizoom();

4. Default plugin options.

$('.photo').zizoom({

  // how activate pugin - "hover" / "click"
  activate    : 'hover',  

  // retrieve zoom element in image
  dataElement : 'zoom',   

  // retrieve zoom element in image
  // requires font awesome 4
  zoomicon    : 'fa fa-search',   

  // icon color
  zoomcolor   : '#fff',   
  
});

---

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