cursor-zoom

Simple module to zoom on picture with cursor

Usage no npm install needed!

<script type="module">
  import cursorZoom from 'https://cdn.skypack.dev/cursor-zoom';
</script>

README

cursor-zoom

Demo GIF

A simple module to zoom on an image with the cursor.

Most of the code comes from: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_zoom

Warning

The <img> must be placed inside a container with relative positioning.

If you display your <img> in <picture> you might have some display issues. To fix them add these lines to your css:

picture {
  position: relative;
  display: inline-block;
}

picture img {
  margin: auto;
}

Installation

$ npm install cursor-zoom

Usage

<div class="position-relative">
    <img class="cursor-zoom" src="img-source.jpg">
</div>
const cursorZoom = require('cursor-zoom');
cursorZoom('.cursor-zoom', {// all parameters are optionals

        // 'auto' will place the zooming image on the right or left, depending of the position of the image on the window
        position: 'auto', // 'top', 'left', 'right', 'left', 'auto' | default: 'auto'

        // if you use bootstrap you can use class like 'col-4'
        // /!\ the class must define the width of the zoom container, which means that the class you
        // pass here in parameter must have the property width defined
        classResult: 'col-4', // class of the zooming image | default: 'cursor-zoom-result'
        
        // the lens is the small square when the cursor is hover the image
        widthLens: 40, // width of the lens in % of the smallest width or height of the image | default 40

        margin: 15, // margin between image and zooming image in px
    });

If you want to pass different parameters for images, you can do this:

cursorZoom('.image-class-1',{margin: 20});
cursorZoom('.image-class-2',{margin: 40});

If you want to override a previous configuration, you can do this:

cursorZoom('.image-class-1',{position: 'auto'});
cursorZoom('.image-class-1',{position: 'top'});

You can also pass DOM element:

cursorZoom(document.querySelector('.image-class-1'));// 1 element
cursorZoom(document.querySelectorAll('.image-class-1'));// multiple elements

Jquery also works:

cursorZoom($('.image-class-1'));

Customizing

You can override these css class:

#cursor-zoom-lens {
    position: absolute;
    border: 1px solid #d4d4d4;
    background-color: rgba(0, 0, 0, 0.5);
}

#cursor-zoom-result {
    position: absolute;
    border: 1px solid #d4d4d4;
    z-index: 100000;
}

.cursor-zoom-result {
    width: 300px;
}

Contributing

Pull requests are welcome.

If you detect a bug, please open an issue.

To build the project:

$ npm run build

License

MIT