Test the demo parameters
Download jquery.mlens v.1.0
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-1.8.2.min.js"></script> <script type="text/javascript" src="js/jquery.mlens-1.0.min.js"></script>
HTML
You only need an image to attach mlens to. Our image has got an ID (green_monster) and a parameter called data-big that contains the path to the hi-res version of the image.
<img id="green_monster" src="images/GreenMonster_640px.jpg" alt="green monster graffiti by Kotzian" data-big="images/GreenMonster_1280px.jpg" />
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
mlens has to be called right on the image (green_monster) and the configurable parameters are shown here.
<script type="text/javascript">
$(document).ready(function()
{
$("#green_monster").mlens(
{
imgSrc: $("#green_monster").attr("data-big"), // path of the hi-res version of the image
lensShape: "circle", // shape of the lens (circle or 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)
});
});
</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.
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!