Magnify Images With The js-img-magnify Library

Category: Javascript , Zoom | October 19, 2023
Author:s749312025
Views Total:456 views
Official Page:Go to website
Last Update:October 19, 2023
License:MIT

Preview:

Magnify Images With The js-img-magnify Library

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,
})

You Might Be Interested In:


Leave a Reply