Magnify Images With The js-img-magnify Library

Preview:

Description:

js-img-magnify is a tiny image zoom JS library that makes it easy to enable intuitive image magnification with hover previews.

You can specify any zoom factor, customize the magnifying glass graphic, and display the zoomed image in a separate container for flexibility.

How to use it:

1. Install and import the js-img-magnify.

# NPM
$ npm i js-img-magnify

// ES module
import magnifyImg from 'js-img-magnify';
// UMD
<script src="js-img-magnify.umd.js"></script>

2. Create a container to hold the original image.

<div id="example">
</div>

3. Call the magnifyImg function, set the path to your image, and specify the selector of image conainer.

magnifyImg({
  src: 'product.jpg',
  target: document.getElementById('example'),
})

4. Set the width of the image. Default: auto.

magnifyImg({
  src: 'product.jpg',
  target: document.getElementById('example'),
  width: 500, // in px, can also '50%'
})

5. Show the magnified image in another container.

magnifyImg({
  src: 'product.jpg',
  target: document.getElementById('example'),
  MagnifyDom: document.getElementById('show'),
})

6. Set the zoom factor. Default: 3.

magnifyImg({
  src: 'product.jpg',
  target: document.getElementById('example'),
  zoom: 2,
})

7. Customize the magnifying glass effect.

magnifyImg({
  src: 'product.jpg',
  target: document.getElementById('example'),
  MagnifyDomWidth: 200,
  MagnifyDomStyles: {}, // CSS rules here
})

8. Determine whether to allow exceeding the image range at the image edges. Default: true.

magnifyImg({
  src: 'product.jpg',
  target: document.getElementById('example'),
  overflow: false,
})