Easy Flexible jQuery Image Zoom Plugin - Sprite Zoom

File Size: 7.31 KB
Views Total: 12162
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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">

3. Call the function to initialize the image zoom plugin with default 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>


  // 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.