HTML Magnifier

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

Demo

Open demo.html from this repo directly in your browser (no build step required) to see it in action.

Installation

npm / bundler (ES module)

npm install @jagermesh/html-magnifier

import HTMLMagnifier from '@jagermesh/html-magnifier';

const magnifier = new HTMLMagnifier();

As a plain <script> tag

Include the pre-built UMD bundle from dist/, or from a CDN:

<script src="https://cdn.jsdelivr.net/npm/@jagermesh/html-magnifier/dist/html-magnifier.min.js"></script>
<script>
  const magnifier = new window.HTMLMagnifier();
</script>

Usage

1. Create magnifier instance

const magnifier = new HTMLMagnifier();

2. Show when needed

magnifier.show();

3. Hide when not needed

magnifier.hide();

That's all.

There are also some settings which you can pass to constructor

{
  zoom: 2,
  shape: 'square', // 'square' | 'circle'
  width: 200,
  height: 200,
}

Or set afterwards

magnifier.setZoom(2);
magnifier.setShape('circle');
magnifier.setWidth(300);
magnifier.setHeight(300);

You can also read the current settings and visibility state back:

magnifier.getZoom();
magnifier.getShape();
magnifier.getWidth();
magnifier.getHeight();
magnifier.isVisible();

There are also a couple of events which you may find useful. Handlers receive a plain DOM node (no jQuery required):

1. You may want to remove some elements from magnification:

magnifier.on('prepareContent', (magnifierContent) => {
  magnifierContent.querySelectorAll('.some-selector').forEach((el) => el.remove());
});

2. In some cases you may want to sync scroll positions for scrollable areas:

magnifier.on('syncScrollBars', (magnifierContent) => {
  const source = document.querySelector('div.scrollable-area');
  const target = magnifierContent.querySelector('div.scrollable-area');
  if (source && target) {
    target.scrollTop = source.scrollTop;
  }
});

3. You can also force a re-sync of the magnified content or scroll positions at any time:

magnifier.syncContent();
magnifier.syncScrollBars();