Simple Yet Versatile jQuery Image Magnifying Plugin - Zoomple

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

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

Basic usage:

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

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

<link rel="stylesheet" media="screen" href="styles/zoomple.css" type="text/css" />
<script src="zoomple.js" type="text/javascript"></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.

<script type="text/javascript">
$(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
});
 }); 
</script>  

5. All the settings.

<script type="text/javascript">
$(document).ready(function() { 
$('.zoomple').zoomple({ 
blankURL : 'images/blank.gif', // specifies the source for the blank image. 
bgColor : '#90D5D9', // the fill color that should be displayed after the image border.
attachWindowToMouse: true, // 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.
windowPosition: {x:’right’,y:’bottom’}, // 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’.
loaderURL : 'images/loader.gif', // Specifies the source for the “loading” image. 
delay : 0, // Delays the zoom start. 
offset : {x:-150,y:-150}, //  sets the offset of the thumbnail from the mouse cursor.
source : 'href', // specifies the source attribute that holds the path to the magnified image. The two possible options are ‘href’ and ‘rel’.
zoomWidth : 300, // sets the width of the preview. 
zoomHeight : 300, // sets the height of the preview. 
showCursor: false, // displays cursor of the middle of the window so you can see where your cursor points on the image.
roundedCorners : true // displays the magnifying glass in circle (so it looks like actual magnifying glass)
});
 }); 
</script>  

Change log:

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.