Easy Flexible jQuery Image Zoom Plugin - Sprite Zoom
File Size: | 7.31 KB |
---|---|
Views Total: | 12116 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Sprite Zoom is an easy yet flexible jQuery image zoom plugin which provides a variety of magnifying glass effects on your images.
How to use it:
1. Load the jQuery sprite zoom plugin after you have jQuery library included.
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="src/jquery.spritezoom.js"></script>
2. Insert the preview & zoom images into the web page.
<a href="images/zoom.jpg" class="zoom-demo" title="Large img"> <img src="images/small.jpg" title="Small img"> </a>
3. Call the function to initialize the image zoom plugin with default options.
$(".zoom-demo").spritezoom({ //OPTIONS });
4. By default, the plugin will create an inner zoom function on the target image when you hover over it. You can override the following settings to customize the plugin.
// fadeIn speed fadeInSpeed : 500, // fadeOut speed fadeOutSpeed : 300, // general element fade out speed // 'hover' or 'click', behavior : "hover", // "inner", "top", "right", "bottom", "left", "magnify" or empty layout : "inner", // magnifying glass appearance border : 4, magSize : 0.3,
5. You can also add the preview & zoom images using options object passed to the initialization function.
<div class="demo"></div> $(".demo").spritezoom({ // parameter for the preview image // the uri to the image source : undefined, // the loaded image object image : undefined, // the optional title for the preview image title : undefined, // the width of the image or of the visible portion of the image width : undefined, // the height of the image or of the visible portion of the image height : undefined, // offset to the visible portion of the image offset : undefined, // parameter for the zoom image zSource : undefined, zImage : undefined, zTitle : undefined, zWidth : undefined, zHeight : undefined, zOffset : undefined });
This awesome jQuery plugin is developed by giniedp. For more Advanced Usages, please check the demo page or visit the official website.