Content Magnifier
npm install html-magnifierSimple, lightweight pure JavaScript component that adds a magnifying glass functionality to any web page content.
https://jagermesh.github.io/html-magnifier/
1) Include the script:
~~~
~~~
2) Create magnifier instance
~~~
var magnifier = new HTMLMagnifier();
~~~
3) Show when needed
~~~
magnifier.show();
~~~
4) Hide when not needed
~~~
magnifier.hide();
~~~
That's all.
There are also some settings which you can pass to constructor
~~~
{
zoom: 2
shape: square | circle
width: 200
height: 200
}
~~~
Or set aftewards
~~~
magnifier.setZoom(2);
magnifier.setShape('circle');
magnifier.setWidth(300);
magnifier.setHeight(300);
~~~
There are also couple events which you may find usefull
1) You may want to remove some elements from magnfication:
~~~
magnifier.on('prepareContent', function(magnifierContent) {
$('.some-selector', magnifierContent).remove();
});
~~~
2) In some cases you may want to sync scroll positions for scollable areas:
~~~
magnifier.on('syncScrollBars', function(magnifierContent) {
$('div.scrollable-area', magnifierContent).scrollTop($('div.scrollable-area').scrollTop());
});
~~~
Have fun. Send PR if you find any glitches or want to make improvements.
:)