jQuery Plugin For Customizable Image Magnifying Effect - Classy Loupe

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.