Minimal jQuery Image Inner Zoom & Pan Plugin - zizoom

File Size: 6.96 KB
Views Total: 7014
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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" >

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


4. Default plugin options.


  // 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.