js-image-magnify

This package enables you to magnifiy on images, for example in product pages or galleries.

Installation

Include it in your project:

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

Usage

<div class="container">
  <!-- The area that indicates where to magnify on the image  -->
  <div class="squareZoom"></div>
  <!-- The image you want to magnify on it -->
  <img src="img/picture.jpg" alt="picture" class="img" />
  <!-- The place of showing magnified area -->
  <div class="showZoomImg" style="background-image: url(img/picture.jpg)"></div>
</div>