Your Daily Resource of Best Jquery plugins
Fastest Growing Jquery and CSS Repository Making easy for Web Developers to keep up with New plugins and frameworks that are released almost every day.

Monocle – Zoom Image Using Draggable Magnifying Loupe Plugin

Jul 26th, 2014

Drag the Magnifying Monocle Loupe  below to see zoom image.

Image Credit : DeviantArt

MONOCLE – a jQuery plugin by jonbrennecke.

This plugin adds the simple “$(…).monocle” function to any jquery image.

The monocle function takes a few simple parameters:
zoom: a number, (1.5 to 2 works best!)
size: a string (like “150px”)
classname: a class to be added to the generated loupe

Basically you just have to include image DIV id and call monocle :

$( document ).ready( function(){

	// call the loupe

		// parameters
		zoom : 1.5,
		size : "12em",
		className : "glossy",

		// callbacks
		mouseenter : function ( e ) {}, 
		mouseleave : function ( e ) {},
		drag : function ( e ) {}

There are several included styles (“classnames”) provided (try “glossy”,”flat”,”metro”,”smooth”).

Monocle - Zoom Image Using Draggable Magnifying Loupe PluginBut it’s easy to make your own with the SASS functions that are provided to extend the basic “loupe” style.

Visit Site Download