Minimal jQuery Image Inner Zoom & Pan Plugin - zizoom
File Size: | 6.96 KB |
---|---|
Views Total: | 7125 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.