Minimalist jQuery Plugin For The Magnifying of The Images - MagnigierRentgen

File Size: 296 KB
Views Total: 7352
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimalist jQuery Plugin For The Magnifying of The Images - MagnigierRentgen

MagnigierRentgen is a dead simple jQuery plugin which allows an image to be zoomed with a magnifying glass effect. Works perfect on responsive web layout.

See also:

How to use it:

1. Copy and include the JavaScript file jQuery.MagnifierRentgen.min.js, and the style sheet jQuery.MagnifierRentgen.min.css in your webpage.

<link rel="stylesheet" href="jQuery.MagnifierRentgen.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="jQuery.MagnifierRentgen.min.js"></script>

2. Add the small and full-size images defined via the data-image attributes to a container as follow. The data-size attribute is used to specify the size of the magnifying lens.

<div class="demo"
     data-image="small.jpg"
     data-image-zoom="large.jpg"
     data-size="100">
</div>

3. Call the function on the top element and done.

$(".demo").magnifierRentgen();

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