Zoom Image On Hover – js-image-zoom

Preview:

Description:

A lightweight and zero-dependency JavaScript image zoom library to enlarge part of your image and display the zoomed image in a specific container on mouse hover.

Install & download:

# NPM
$ npm install js-image-zoom --save

How to use it:

1. Load the js-image-zoom library into the document.

<script src="js-image-zoom.js"></script>
<!-- Or from a CDN -->
<script src="https://unpkg.com/js-image-zoom/js-image-zoom.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-image-zoom/js-image-zoom.min.js"></script>

2. Wrap your image to a container.

<div id="img-container">
  <img src="1.jpg" />
<div>

3. Initialize the image zoom library on the image container and specify the image width as follows.

var options = {
    width: 400, // required
    // more options here
};
new ImageZoom(document.getElementById("img-container"), options);

4. Set the height of the original image.

var options = {
    width: 400, 
    height: 400
};

5. Set the width of the zoomed image.

var options = {
    width: 400, 
    zoomWidth: 500
};

6. You can also set the image path in the JavaScript.

var options = {
    width: 400, 
    img: '/path/to/1.jpg'
};

7. Set the x/y offsets of the zoomed image.

var options = {
    width: 400, 
    offset: {
      vertical: 0,
      horizontal: 10
    }
};

8. Customize the zoom scale.

var options = {
    width: 400, 
    scale: 2.5
};

9. Specify the container in which you want to place the zoomed image.

var options = {
    width: 400, 
    zoomContainer: domNode
};

10. Apply your own CSS styles to the zoomed image.

var options = {
    width: 400, 
    zoomStyle: {
      // your css styles here
    }
};

11. Apply your own CSS styles to the zoom lens.

var options = {
    width: 400, 
    zoomLensStyle: {
      // your css styles here
    }
};

12. Set the position of the zoomed image. ‘original’, ‘top’, ‘left’, ‘right’ (default), or ‘bottom’.

var options = {
    width: 400, 
    zoomPosition: 'left'
};