Skip to content

jagermesh/html-magnifier

Repository files navigation

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:
<script type="text/javascript" src="html-magnifier.js"></script>
  1. Create magnifier instance
var magnifier = new HTMLMagnifier();
  1. Show when needed
magnifier.show();
  1. 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();
});
  1. 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.

:)