add logic for "zoom on hover" setting

assets/magnify.js

@@ -1,65 +1,37 @@
-const images = document.querySelectorAll('.product__media-image');
-
-const magnify = (image, scale) => {
-  let glass, w, h, bw;
-
-  glass = document.createElement("div");
-  glass.setAttribute("class", "img-magnifier-glass");
-  image.parentElement.insertBefore(glass, image);
-
-  glass.addEventListener('click', () => {
-    glass.remove();
-  });
-
-  /* Set background properties for the magnifier glass: */
-  glass.style.backgroundImage = "url('" + image.src + "')";
-  glass.style.backgroundRepeat = "no-repeat";
-  glass.style.backgroundSize = (image.width * scale) + "px " + (image.height * scale) + "px";
-  bw = 3;
-  w = glass.offsetWidth / 2;
-  h = glass.offsetHeight / 2;
-
-  /* Execute a function when someone moves the magnifier glass over the image: */
-  glass.addEventListener("mousemove", moveMagnifier);
-  image.addEventListener("mousemove", moveMagnifier);
-
-  function moveMagnifier(e) {
-    var pos, x, y;
-    /* Prevent any other actions that may occur when moving over the image */
-    e.preventDefault();
-    /* Get the cursor's x and y positions: */
-    pos = getCursorPos(e);
-    x = pos.x;
-    y = pos.y;
-    /* Prevent the magnifier glass from being positioned outside the image: */
-    if (x > image.width - (w / scale)) {x = image.width - (w / scale);}
-    if (x < w / scale) {x = w / scale;}
-    if (y > image.height - (h / scale)) {y = image.height - (h / scale);}
-    if (y < h / scale) {y = h / scale;}
-    /* Set the position of the magnifier glass: */
-    glass.style.left = (x - w) + "px";
-    glass.style.top = (y - h) + "px";
-    /* Display what the magnifier glass "sees": */
-    glass.style.backgroundPosition = "-" + ((x * scale) - w + bw) + "px -" + ((y * scale) - h + bw) + "px";
-  }
-
-  function getCursorPos(e) {
-    var a, x = 0, y = 0;
-    e = e || window.event;
-    /* Get the x and y positions of the image: */
-    a = image.getBoundingClientRect();
-    /* Calculate the cursor's x and y coordinates, relative to the image: */
-    x = e.pageX - a.left;
-    y = e.pageY - a.top;
-    /* Consider any page scrolling: */
-    x = x - window.pageXOffset;
-    y = y - window.pageYOffset;
-    return {x : x, y : y};
-  }
+// create a container and set the full-size image as its background
+const createOverlay = (image) => {
+  overlay = document.createElement('div');
+  overlay.setAttribute('class', 'image--full-size');
+  overlay.setAttribute('aria-hidden', 'true');
+  overlay.style.backgroundImage = `url('${image.src}')`;
+  return overlay;
+};
+
+const moveWithHover = (image, event, zoomRatio) => {
+  // calculate mouse position
+  const ratio = image.height / image.width;
+  const container = event.target.getBoundingClientRect();
+  const xPosition = event.clientX - container.left;
+  const yPosition = event.clientY - container.top;
+  const xPercent = `${xPosition / (overlay.clientWidth / 100)}%`;
+  const yPercent = `${yPosition / ((overlay.clientWidth * ratio) / 100)}%`;
+
+  // determine what to show in the frame
+  overlay.style.backgroundPosition = `${xPercent} ${yPercent}`;
+  overlay.style.backgroundSize = `${image.width * zoomRatio}px`;
+};
+
+const magnify = (image, zoomRatio) => {
+  // add full-size image on top of original
+  const overlay = createOverlay(image);
+  image.parentElement.insertBefore(overlay, image);
+
+  overlay.onclick = () => overlay.remove();
+  overlay.onmousemove = (event) => moveWithHover(image, event, zoomRatio);
 }
 
+const images = document.querySelectorAll('.image--original');
+
 images.forEach(image => {
-  image.addEventListener('click', () => {
-    magnify(image, 2);
-  });
+  image.onclick = () => magnify(image, 3);
 });

assets/section-main-product.css

@@ -1142,14 +1142,12 @@ a.product__text {
   border-color: rgb(var(--color-foreground));
 }
 
-.img-magnifier-glass {
-  position: absolute;
+.image--full-size {
   cursor: zoom-out;
   z-index: 1;
-  border: 1px solid black;
 }
 
-.image--zoom {
+.image--original {
   cursor: zoom-in;
 }
 

snippets/product-thumbnail.liquid

@@ -87,7 +87,7 @@
 
   <div class="product__media product__media-container media media--transparent gradient global-media-settings" style="padding-top: {{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100 }}%;">
     {{ media.preview_image | image_url: width: 1946 | image_tag:
-      class: "product__media-image image--zoom",
+      class: "image--original",
       loading: lazy,
       sizes: sizes,
       widths: '246, 493, 600, 713, 823, 990, 1100, 1206, 1346, 1426, 1646, 1946',