Magnifier Image Zoom With Hover And MouseWheel Events

Category: Image , Javascript , Zoom | October 26, 2018
Author: libinprasanth
Views Total: 341
Official Page: Go to website
Last Update: October 26, 2018
License: MIT

Preview:

Magnifier Image Zoom With Hover And MouseWheel Events

Description:

A vanilla JavaScript image zoomer to create a circular magnifier effect on the image that users are able to zoom in/out a part of the image with mouse hover and mouse wheel events.

How to use it:

Load the main JavaScript at the end of the HTML document.

<script src="imageZoom.js"></script>

Add the data-zoom="enabled" attribute to the target image and done.

<div class="image-zoom">
  <img src="image.jpg" data-zoom="enabled">
</div>

Customize the appearance of the lens.

<div class="image-zoom">
  <img src="image.jpg" 
       data-zoom="enabled"
       lens-width="VALUE"
       border-radius="VALUE"
       border-color="VALUE"
       border-width="VALUE">
</div>

You Might Be Interested In:

Leave a Reply