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.

Features:

• 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:

• Simple Image Magnification Effect - Aui-core
• Image Inner Zoom & Magnifier Plugin - JQZoom
• Photo Inner Zoom and Magnifier Plugin - Loupe
• mlens - Compact Magnifying Glass Plugin
• GS Inner Zoom - Image Inner Zoom and Magnifier Plugin
• Simple jQuery Plugin For Image Magnify Effect
• jQuery Plugin For Sniper Lens-Style Magnifying Glass Effect - Snipe
• Easy jQuery Image Zoom and Magnifier Plugin - Leroy Zoom

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() { 
  $('.zoomple').zoomple({ 
    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() { 
$('.zoomple').zoomple({ 

  // 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()

  });
}); 

Changelog:

2018-10-29

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

2016-09-30

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