Magnifier Glass For Images

<script>

(function() {

  // Configure these for your website.

  const containerSelector = 'body'; // Selector for containers with images

  const zoomLevel = 2; // Magnification zoom level

  const glassSize = 100; // Size of the magnifier glass in pixels

  const borderWidth = 3; // Border width around magnifier glass

  function magnify(img, zoom) {

    let glass, w, h, bw;

    /* Create magnifier glass */

    glass = document.createElement("DIV");

    glass.setAttribute("class", "img-magnifier-glass");

    glass.style.width = glass.style.height = glassSize + "px";

    glass.style.borderWidth = borderWidth + "px";

    /* Set background properties for the magnifier glass */

    glass.style.backgroundImage = "url('" + img.src + "')";

    glass.style.backgroundRepeat = "no-repeat";

    glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";

    bw = borderWidth;

    w = glassSize / 2;

    h = glassSize / 2;

    /* Move the magnifier glass when mouse moves over the image */

    function moveMagnifier(e) {

      let pos, x, y;

      pos = getCursorPos(e);

      x = pos.x;

      y = pos.y;

      if (x > img.width || x < 0 || y > img.height || y < 0) {

        glass.style.display = "none";

      } else {

        glass.style.display = "block";

        glass.style.left = (x - w) + "px";

        glass.style.top = (y - h) + "px";

        glass.style.backgroundPosition = "-" + ((x * zoom) - w + bw) + "px -" + ((y * zoom) - h + bw) + "px";

      }

    }

    function getCursorPos(e) {

      let a, x = 0, y = 0;

      e = e || window.event;

      a = img.getBoundingClientRect();

      x = e.pageX - a.left - window.pageXOffset;

      y = e.pageY - a.top - window.pageYOffset;

      return { x: x, y: y };

    }

    /* Insert magnifier glass */

    img.parentElement.insertBefore(glass, img);

    /* Event listeners */

    img.addEventListener("mousemove", moveMagnifier);

    img.addEventListener("mouseout", function() {

      glass.style.display = "none";

    });

    img.addEventListener("mouseover", function() {

      glass.style.display = "block";

    });

  }

  /* Apply magnifier to images within specified container(s) */

  document.addEventListener("DOMContentLoaded", function() {

    let containers = document.querySelectorAll(containerSelector);

    containers.forEach(function(container) {

      let images = container.getElementsByTagName('img');

      Array.prototype.forEach.call(images, function(img) {

        if (!img.parentElement.classList.contains('img-magnifier-container')) {

          let wrapper = document.createElement('div');

          wrapper.setAttribute('class', 'img-magnifier-container');

          img.parentNode.insertBefore(wrapper, img);

          wrapper.appendChild(img);

          magnify(img, zoomLevel);

        }

      });

    });

  });

})();

</script>

<style>

/* Magnifier Glass Effect */

.img-magnifier-container {

  position: relative;

}

.img-magnifier-glass {

  position: absolute;

  border: 3px solid #000;

  border-radius: 50%;

  box-sizing: border-box;

  cursor: none;

  width: 100px;

  height: 100px;

  display: none;

  pointer-events: none;

}

</style>