Zoom Image On Hover – js-image-zoom

Category: Javascript , Zoom | December 20, 2019
Author:malaman
Views Total:8,061 views
Official Page:Go to website
Last Update:December 20, 2019
License:MIT

Preview:

Zoom Image On Hover – js-image-zoom

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'
};

You Might Be Interested In:


2 thoughts on “Zoom Image On Hover – js-image-zoom

  1. Mr D

    This is great, any chance of an example of how the notation should look for setting the css in the styles?

    zoomStyle: {
    // your css styles here
    }

    Reply
    1. Vojtěch Šanda

      Hi,
      I know it’s probably late for you, but it might help others.

      This property is used to set the style via “element.style.cssText” (https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/cssText)

      I’m not sure, why in the docs author assigns an object to it, but if you assign a string with your styles (“color: red; padding: 30px;”) it works as intended.

      If someone has trouble like this, the easiest way to solve it is to look into the unminified js file, search for the property and try to understand how it works, so you can deduce the correct input.

      Reply

Leave a Reply