Simple Yet Versatile jQuery Image Magnifying Plugin - Zoomple

File Size: 31.3 KB
Views Total: 15366
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Simple Yet Versatile jQuery Image Magnifying Plugin - Zoomple

Zoomple is a simple yet powerful jQuery plugin that allows you to apply an image magnifying effect on your image. With this plugin you can enlarge an image on mouse over in a highly customized interface.


  • Camera lens or square interface.
  • Inner zoom or outer zoom.
  • Enlarge an image with description.
  • Enlarge an image with delay.
  • Enlarge an image with fixed position and overlay.
  • Sniper zoom with cross supported.

See also:

Basic usage:

1. Load the latest version of jQuery javascript library from a CDN.

<script src="jquery.min.js"></script>

2. Load the jQuery Zoomple plugin files on your web page, after jQuery library.

<link rel="stylesheet" href="styles/zoomple.css">
<script src="zoomple.js"></script> 

3. Insert a medium version of your image on your web page and wrap the image using <a> tag to set the large version.

<a href="large.jpg" class="zoomple"><img src="small.jpg" alt="" /> </a>

4. Call the plugin with options.

$(document).ready(function() { 
    blankURL : 'images/blank.gif',
    bgColor : '#90D5D9',
    loaderURL : 'images/loader.gif',
    offset : {x:-150,y:-150},
    zoomWidth : 300,  
    zoomHeight : 300,
    roundedCorners : true

5. All the settings with default values.

$(document).ready(function() { 

  // specifies the source for the blank image. 
  blankURL : 'images/blank.gif', 

  // background color
  bgColor : '#90D5D9', 

  // if set to true, the magnifier will follow the mouse, if set to false, the magnifier will sit attached on the side of the image.
  attachWindowToMouse: true, 

  // when attachWindowToMouse is set to false, the window will sit on the side of the image. 
  // This property defines on which corner of the image, the magnifier will sit (e.g. windowPosition : {x:’right’,y:’bottom’}). 
  // Possible values for x: ‘right’, ‘left’. 
  // Possible values for y: ‘top’, ‘bottom’.
  windowPosition: {x:’right’,y:’bottom’}, 

  // specifies the source for the “loading” image. 
  loaderURL : 'images/loader.gif', 

  // delays the zoom start. 
  delay : 0, 

  // sets the offset of the thumbnail from the mouse cursor.
  offset : {x:-150,y:-150}, 

  // specifies the source attribute that holds the path to the magnified image. The two possible options are ‘href’ and ‘rel’.
  source : 'href', 

  // sets the width of the preview. 
  zoomWidth : 300, 

  // sets the height of the preview. 
  zoomHeight : 300, 

  // displays cursor of the middle of the window so you can see where your cursor points on the image.
  showCursor: false, 

  // shows background overlay
  showOverlay: false

  // displays the magnifying glass in circle (so it looks like actual magnifying glass)
  roundedCorners : true,

  // appends timestamp to the url.
  appendTimestamp : true,

  // timestamp on init
  timestamp : new Date().getTime()




  • If you don't want to append the timestamp everytime, you can set the option appendTimestamp to false.


  • Combine and compress with other JS files will fail with Uncaught TypeError

This awesome jQuery plugin is developed by sularome. For more Advanced Usages, please check the demo page or visit the official website.