Lightweight jQuery Plugin For Image Inner Zoom On Hover - Zoomtoo

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.