mlens - Compact Magnifying Glass Plugin

mlens is a lightweight (~1kb minified and gzipped), responsive and retina-ready image zoom Plugin written by musings.it for making a magnifier glass inside an image. 

It comes with some parameters like the lensShape (circle or square), border size, border color and borderRadius.

How to Use:

1. Include jQuery Library and jquery.mlens.js

<script src="js/jquery.min.js"></script>
<script src="js/jquery.mlens.min.js"></script>

2. The CSS (optional)

#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;
}

3. Insert an image into the document and specify the path to the larger image in the data-big attribute:

<img id="example" 
     src="small.jpg" 
     alt="image alt" 
     data-big="large.jpg"
     data-big2x="[email protected]">

4. Call the function on the image and done.

$(document).ready(function(){
  $("#example").mlens({

    // gets image files
    imgSrc: $("#example").attr("data-big"), 
    imgSrc2x: $("#example").attr("data-big2x"),

    // shape of the lens (circle/square)
    lensShape: "circle",

    // size of the lens
    lensSize: ["20%","30%"]

    // size of the lens border (in px)
    borderSize: 4,

    // color of the lens border (#hex)
    borderColor: "#fff",

    // border radius (optional, only if the shape is square)
    borderRadius: 0,

    // path of the overlay image (optional)
    imgOverlay: $("#example").attr("data-overlay"), 

    // true if the overlay image has to adapt to the lens size (true/false)
    overlayAdapt: true,

    // zoom level
    zoomLevel: 1, 

    // is responsive
    responsive: true

  });
});

Changelog:

2018-07-04

• v1.7: update method rewritten and more compact, lensSize array bug fixed

 

---

This awesome jQuery plugin is developed by mlens. For more Advanced Usages, please check the demo page or visit the official website.