add zoom on hover and show spinner when image loading (#2314)

* add zoom on hover and show spinner when image loading
Shopify · Feb 23, 2023 · 194e1a5 · 194e1a5
1 parent 9f2753f
commit 194e1a5
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 8 deletions.
diff --git a/assets/magnify.js b/assets/magnify.js
@@ -1,21 +1,42 @@
 // create a container and set the full-size image as its background
 function createOverlay(image) {
+  const overlayImage = document.createElement('img');
+  overlayImage.setAttribute('src', `${image.src}`);
   overlay = document.createElement('div');
-  overlay.setAttribute('class', 'image-magnify-full-size');
-  overlay.setAttribute('aria-hidden', 'true');
-  overlay.style.backgroundImage = `url('${image.src}')`;
-  image.parentElement.insertBefore(overlay, image);
+  prepareOverlay(overlay, overlayImage);
+
+  image.style.opacity = '50%';
+  toggleLoadingSpinner(image);
+
+  overlayImage.onload = () => {
+    toggleLoadingSpinner(image);
+    image.parentElement.insertBefore(overlay, image);
+    image.style.opacity = '100%';
+  }
+
   return overlay;
 };
 
+function prepareOverlay(container, image) {
+  container.setAttribute('class', 'image-magnify-full-size');
+  container.setAttribute('aria-hidden', 'true');
+  container.style.backgroundImage = `url('${image.src}')`;
+  container.style.backgroundColor = 'var(--gradient-background)';
+}
+
+function toggleLoadingSpinner(image) {
+  const loadingSpinner = image.parentElement.parentElement.querySelector(`.loading-overlay__spinner`);
+  loadingSpinner.classList.toggle('hidden');
+}
+
 function 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)}%`;
+  const xPercent = `${xPosition / (image.clientWidth / 100)}%`;
+  const yPercent = `${yPosition / ((image.clientWidth * ratio) / 100)}%`;
 
   // determine what to show in the frame
   overlay.style.backgroundPosition = `${xPercent} ${yPercent}`;

diff --git a/assets/section-main-product.css b/assets/section-main-product.css
@@ -1167,6 +1167,22 @@ a.product__text {
   display: none;
 }
 
+.product__modal-opener > .loading-overlay__spinner {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  position: absolute;
+  display: flex;
+  align-items: center;
+  height: 48px;
+  width: 48px;
+}
+
+.product__modal-opener .path {
+  stroke: rgb(var(--color-base-accent-1));
+  opacity: 0.75;
+}
+
 @media (hover: hover) {
   .product__media-zoom-hover,
   .product__media-icon--hover {

diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
@@ -1424,13 +1424,18 @@
           "value": "lightbox",
           "label": "t:sections.main-product.settings.image_zoom.options__1.label"
         },
+        {
+          "value": "hover",
+          "label": "t:sections.main-product.settings.image_zoom.options__2.label"
+        },
         {
           "value": "none",
           "label": "t:sections.main-product.settings.image_zoom.options__3.label"
         }
       ],
       "default": "lightbox",
-      "label": "t:sections.main-product.settings.image_zoom.label"
+      "label": "t:sections.main-product.settings.image_zoom.label",
+      "info": "t:sections.main-product.settings.image_zoom.info"
     },
     {
       "type": "checkbox",

diff --git a/sections/main-product.liquid b/sections/main-product.liquid
@@ -1998,13 +1998,18 @@
           "value": "lightbox",
           "label": "t:sections.main-product.settings.image_zoom.options__1.label"
         },
+        {
+          "value": "hover",
+          "label": "t:sections.main-product.settings.image_zoom.options__2.label"
+        },
         {
           "value": "none",
           "label": "t:sections.main-product.settings.image_zoom.options__3.label"
         }
       ],
       "default": "lightbox",
-      "label": "t:sections.main-product.settings.image_zoom.label"
+      "label": "t:sections.main-product.settings.image_zoom.label",
+      "info": "t:sections.main-product.settings.image_zoom.info"
     },
     {
       "type": "select",

diff --git a/snippets/product-thumbnail.liquid b/snippets/product-thumbnail.liquid
@@ -90,6 +90,17 @@
         endcase
       -%}
     </span>
+    <div class="loading-overlay__spinner hidden">
+      <svg
+        aria-hidden="true"
+        focusable="false"
+        class="spinner"
+        viewBox="0 0 66 66"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <circle class="path" fill="none" stroke-width="4" cx="33" cy="33" r="30"></circle>
+      </svg>
+    </div>
     <div class="product__media media media--transparent">
       {{ media.preview_image | image_url: width: 1946 | image_tag:
         class: image_class,