Test the demo parameters
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.7.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/gear.jpg" alt="bike gear by Markus Spiske" data-big="images/gear-big.jpg" data-big2x="images/gear-big@2x.jpg" data-overlay="images/overlay.png" />
CSS (optional)
You can style your image as you prefer, our image (gear) is wrapped in a DIV (img_wrapper) with the characteristics listed below.
Please note: if you want mlens to be responsive (new from v.1.6), you must set the responsive parameter to true, remember that the image width will be 100% of its container width, thus you will have to style the container correctly.
#img_wrapper {
position: relative;
width: 55%;
height: auto;
margin: 0 5% 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 (gear) and the configurable parameters are shown here.
<script type="text/javascript">
$(document).ready(function()
{
$("#gear").mlens(
{
imgSrc: $("#gear").attr("data-big"), // path of the hi-res version of the image
imgSrc2x: $("#gear").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: ["20%","30%"], // lens dimensions (in px or in % with respect to image dimensions)
// can be different for X and Y dimension
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: $("#gear").attr("data-overlay"), // path of the overlay image (optional)
overlayAdapt: true, // true if the overlay image has to adapt to the lens size (boolean)
zoomLevel: 1, // zoom level multiplicator (number)
responsive: true // true if mlens has to be responsive (boolean)
});
});
</script>
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 527 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 mlens responsive?
Yes, from version v.1.6 mlens is responsive: here there is a downloadable demo [.zip, 373 Kb]
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:
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 donate with Paypal. Thank you!
Change log
v.1.7 2018.03.05: update method rewritten and more compact, lensSize array bug fixed
v.1.6 2015.12.11: responsive version
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