JavaScript content magnifier.

Simple, lightweight pure JavaScript component that adds a magnifying glass functionality to any web page content.

Demo

https://jagermesh.github.io/html-magnifier/

Usage:

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.

:)