Lightweight jQuery Plugin For Image Inner Zoom On Hover - Zoomtoo
File Size: | 442 KB |
---|---|
Views Total: | 7406 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Zoomtoo is a lightweight jQuery plugin that provides inner zoom functionality on your image when the mouse hovers over it.
How to use it:
1. Insert a low-resolution image in your webpage, and use data-src
attribute to specify the path to the high resolution version.
<div id="demo"> <img src="1.jpg" data-src="1-large.jpg"> </div>
2. Include jQuery library and the jQuery zoomtoo plugin at the bottom of the web page.
<script src="jquery.min.js"></script> <script src="dist/jquery.zoomtoo.js"></script>
3. Call the plugin on the image wrapper to enable the inner zoom.
$("#demo").zoomToo({ magnify: 1 });
4. Default options.
$("#demo").zoomToo({ // duration in ms showDuration: 500, moveDuration: 1200, // initial zoom level magnify: 1, // width / height of the lens lensWidth: 200, lensHeight: 200 });
Change log:
v1.0.0 (2015-06-07)
- images that take a while to load will show a spinner
This awesome jQuery plugin is developed by sevagf. For more Advanced Usages, please check the demo page or visit the official website.