Simple Yet Versatile jQuery Image Magnifying Plugin - Zoomple
File Size: | 31.3 KB |
---|---|
Views Total: | 15234 |
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 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.