mlens - Compact Magnifying Glass Plugin

mlens - Compact Magnifying Glass Plugin
File Size: 1.34 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.