mlens logo

jQuery plugin

the magnifying glass by

green monster graffiti by Kotzian

Test the demo parameters

Only if lensShape is square

Download jquery.mlens v.1.5

Version: September 25th 2014

Settings for this demo

Files to include

You have to include the last jQuery version and the minified version of mlens (suitable for production).

<script type="text/javascript" src="js/jquery-last.min.js"></script>
<script type="text/javascript" src="js/jquery.mlens-1.5.min.js"></script>

HTML (there are news!)

You only need an image to attach mlens to. Our image has got an ID (green_monster), a parameter called data-big that contains the path to the hi-res version of the image, a parameter called data-overlay that contains the path to the overlay image of the lens (optional, new form v.1.2) and a parameter called data-big2x that contains the path to the hi-res @2x version of the image for retina displays (optional, new form v.1.3)

<img id="green_monster" src="images/GreenMonster.jpg" alt="green monster graffiti by Kotzian" data-big="images/GreenMonster_big.jpg" data-big2x="images/GreenMonster_big@2x.jpg" data-overlay="images/overlay.png" />

CSS (optional)

You can style your image as you prefer, our image (green_monster) is wrapped in a DIV (green_wrapper) with these characteristics:

#green_wrapper {
	position: relative;
	width: 640px;
	height: auto;
	margin: 0 auto;
	border: 12px solid #fff;
	border-radius: 10px;
	box-shadow: 1px 1px 5px rgba(50,50,50 0.5);
	float: left;

jQuery (there are news!)

mlens has to be called right on the image (green_monster) and the configurable parameters are shown here.

<script type="text/javascript">
		imgSrc: $("#green_monster").attr("data-big"),	    // path of the hi-res version of the image
		imgSrc2x: $("#green_monster").attr("data-big2x"),  // path of the hi-res @2x version of the image
                                                                   //for retina displays (optional)
		lensShape: "circle",				// shape of the lens (circle/square)
		lensSize: 180,					// size of the lens (in px)
		borderSize: 4,					// size of the lens border (in px)
		borderColor: "#fff",				// color of the lens border (#hex)
		borderRadius: 0,				// border radius (optional, only if the shape is square)
		imgOverlay: $("#green_monster").attr("data-overlay"), // path of the overlay image (optional)
		overlayAdapt: true, // true if the overlay image has to adapt to the lens size (true/false)
		zoomLevel: 2                                    // zoom level multiplicator (number)

Frequently asked questions

What are the differences between the three versions that I can download?

MIN is the minified version, suitable for production; DEV is the developer version, it is not minified and the code is commented (in English); MIN.GZ is a compressed version of MIN.

Does mlens support multiple instances?

Yes, mlens supports multiple instances and, due to many requests, here you will find a working demo for download [.zip 367 Kb].

Can I call mlens on a class instead of on a single image?

Yes, you can call mlens on a bunch of images with the same class by calling it directly on the class, each image will have its own instance of mlens.

Is there a Wordpress plugin?

Not yet, we are working on it.

Can I ask for a modification / a new feature / a customization?

Sure! Contact us by email at musings[at]musings[dot]it or via Twitter @musingspuntoit.

Where can I find other plugins by musings?

You can find them here:
musings web design codecanyon Coding Divas

I really liked mlens, how can I help you?

You can help us in these two ways: you can share mlens using the social buttons below and you can with Paypal. Thank you!

Change log

v.1.5 2014.09.25: bug fixed ("destroy" method), code optimization

v.1.4 2014.05.22: code optimized and added zoomLevel parameter (thanks to Vincent Robic)

v.1.3 2013.12.18: added @2x hi-res image support for retina displays. Thanks to Matthias Mullie for the idea and the suggestions, thanks to Michela Chiucini for performing the tests

v.1.2 2013.09.25: added overlay image support for the lens

v.1.1 2013.08.26: added touch support for mobile

v.1.0 2012.10.17: initial release