MagnigierRentgen – a jQuery plugin for magnifying images (x-ray)
Magnifying images effect? X-ray photos on website? No problemo!
First of all…
… welcome back after huge break. It would take too long to describe all the reasons we paused publishing new posts, but finally… we are back!
So let’s go!
Once I used effects of MagnigierRentgen plugin to make x-ray of girl pictures 🙂
MagnigierRentgen is a small jQ plugin for zooming / magnifying images, with a bonus: x-ray effect easy to implement. The plugin is simple, but allows to create nice effect. Also, it works nice with responsive layouts.
Usage
1. Include jQuery.MagnifierRentgen.min.js, jQuery library and jQuery.MagnifierRentgen.min.css in the document.
2. Add a small, full-size images defined via the data-image attributes to a container, as in example below:
<div class="test" data-image="pc.jpg" data-image-zoom="pc-guts.jpg" data-size="100"> </div>
The data-size attribute is used to specify the size of the magnifying lens.
3. Call the plugin:
$(".test").magnifierRentgen();
Sample result:
Demo on-line:
http://agragregra.github.io/demos/MagnifierRentgen
GitHub:
https://github.com/agragregra/MagnifierRentgen
See also:
http://javascript-html5-tutorial.net/2015/12/16/jquery-magnifying-glass-zoom-plugin.html
http://javascript-html5-tutorial.net/2015/11/25/imagelens-a-lens-effect-image-zoom-plugin.html
http://javascript-html5-tutorial.net/2017/01/11/jquery-pan-and-zoom-plugin-smart-zoom.html
Enjoy!
