jQuery Plugin For Customizable Image Magnifying Effect - Classy Loupe
File Size: | 212 KB |
---|---|
Views Total: | 6084 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Classy Loupe is a jQuery plugin that turns the cursor into a fully customizable a camera lens so that the visitor can view the details of a specific part of your image when mouse hover.
Basic Usage:
1. Load jQuery library and other required JavaScript libraries in the document.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/jquery.mousewheel.js"></script> <script src="js/jquery.easing.1.2.js"></script>
2. Load the jQuery Classy Loupe plugin's JavaScript and Stylesheet in the document.
<link href="css/jquery.classyloupe.css" rel="stylesheet"> <script src="js/jquery.classyloupe.js"></script>
3. Call the plugin on the target image and done.
$(document).ready(function() { $('#demo').ClassyLoupe(); });
4. Override the default parameters as shown below to customize the image magnifying effect.
$('#demo').ClassyLoupe({ // the mouse event that will trigger the loupe effect trigger: 'mouseenter', // the shape of the loupe, can be circle, rounded or square shape: 'circle', // does the loupe have rounded corners (if square shape) roundedCorners: 10, // fast, slow or medium loupeToggleSpeed: 'medium', // easing option loupeToggleEasing: 'linear', // loupe size, width and height size: 200, // minimul loupe size minSize: 150, // maximum loupe size maxSize: 250, // if the loupe is glossy or not glossy: true, // if the loupe will have a drop-shadow effect shadow: true, // resizeable resize: true, sizeSnap: 10, // fast, slow or medium resizeAnimationSpeed: 'medium', // easing option resizeAnimationEasing: 'easeOutBack', canZoom: true, zoomKey: 90, zoom: 100, minZoom: 50, maxZoom: 200, zoomSnap: 5, // fast, slow or medium zoomAnimationSpeed: 'medium', // easing option zoomAnimationEasing: 'easeOutBack', // Overlay options overlay: true, overlayOpacity: 0.5, overlayEffectSpeed: 'slow', overlayEffectEasing: 'easeOutBack', overlayClassName: '' });
This awesome jQuery plugin is developed by class.pm. For more Advanced Usages, please check the demo page or visit the official website.