ClassyLoupe
Zooming images, the fun way!

ClassyLoupe is a jQuery plugin written by Marius Stanciu - Sergiu, a plugin that gives you the ability to add zoom on hover ability for your photos with single line of code.

With ClassyLoupe you have the ability to control the zoom level and loupe size via mouse scroll which gives you the opportunity to enlarge areas that you might be interested in.

Download it

First you need to include the jQuery library, since ClassyLoupe is a plugin. You can download it from the jQuery website or link it directly from the Google CDN. Also, you'll need the jquery.mousewheel and jquery.easing plugins, and those files are already in the package ready to be included.

Secondly, you need to include the jQuery ClassyLoupe javascript and the css file into your page. You can do it by adding the code below to your page.

Next, you implement the actual image(s) that will be magnified/zoomed by the Loupe. The structure is as simple as it can get.

As the last step, you trigger the ClassyLoupe() function on the element you just created. In this case, we trigger the function on the image with the class louped.

$('.louped').ClassyLoupe({
    maxSize: 600,
    loupeToggleSpeed: 'fast'
});

• Parameters

  ---

• shape - the shape of the loupe, can be circle, rounded or square, default is circle
• glossy - if the loupe is glossy or not, can be true or false, default is true
• shadow - if the loupe will have a drop-shadow effect, can be true or false, default is true
• trigger - the mouse event that will trigger the loupe effect, default is mouseenter
• roundedCorners - does the loupe have rounded corners (if square shape), default is 10
• size - loupe size, width and height, default is 200
• minSize - minimul loupe size, default is 150
• maxSize - maximum loupe size, default is 250
• resize - can be true or false, default is true
• sizeSnap - , default is 10
• canZoom - can be true or false, default is true
• zoom - , default is 100
• minZoom - , default is 50
• maxZoom - , default is 200
• zoomSnap - , default is 5
• overlay - can be true or false, default is true
• overlayOpacity - , default is 0.5
• overlayClassName -

$('#loupe2').ClassyLoupe({
    overlayClassName: 'overlay_img',
    shape: 'rounded',
    size: 160,
    minSize: 200,
    maxSize: 400,
    sizeSnap: 25,
    canZoom: false
});

$('#loupe5').ClassyLoupe({
    size: 160,
    overlay: false,
    shape: 'rounded',
    canZoom: false,
    resize: false
});