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.3

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.3.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)

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.

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.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