Easy Flexible jQuery Image Zoom Plugin - Sprite Zoom

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.