mlens - Compact Magnifying Glass Plugin
File Size: | 1.34 KB |
---|---|
Views Total: | 3733 |
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.