Add zoom flexibility (#1983)

add 'lightbox', 'hover', and 'none' zoom settings to images

assets/magnify.js

@@ -0,0 +1,42 @@
+// create a container and set the full-size image as its background
+function createOverlay(image) {
+  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);
+  return overlay;
+};
+
+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)}%`;
+
+  // determine what to show in the frame
+  overlay.style.backgroundPosition = `${xPercent} ${yPercent}`;
+  overlay.style.backgroundSize = `${image.width * zoomRatio}px`;
+};
+
+function magnify(image, zoomRatio) {
+  const overlay = createOverlay(image);
+  overlay.onclick = () => overlay.remove();
+  overlay.onmousemove = (event) => moveWithHover(image, event, zoomRatio);
+  overlay.onmouseleave = () => overlay.remove();
+}
+
+function enableZoomOnHover(zoomRatio) {
+  const images = document.querySelectorAll('.image-magnify-hover');
+  images.forEach(image => {
+    image.onclick = (event) => {
+      magnify(image, zoomRatio);
+      moveWithHover(image, event, zoomRatio);
+    };
+  });
+}
+
+enableZoomOnHover(2);

assets/section-main-product.css

@@ -1149,6 +1149,40 @@ a.product__text {
   border-color: rgb(var(--color-foreground));
 }
 
+.image-magnify-full-size {
+  cursor: zoom-out;
+  z-index: 1;
+  margin: 0;
+  border-radius: calc(var(--media-radius) - var(--media-border-width));
+}
+
+.image-magnify-hover {
+  cursor: zoom-in;
+}
+
+.product__modal-opener--image .product__media-zoom-none,
+.product__media-icon--none {
+  display: none;
+}
+
+@media (hover: hover) {
+  .product__media-zoom-hover,
+  .product__media-icon--hover {
+    display: none;
+  }
+}
+
+@media screen and (max-width: 749px) {
+  .product__media-zoom-hover,
+  .product__media-icon--hover {
+    display: flex;
+  }
+}
+
+.js .product__media {
+  overflow: hidden !important;
+}
+
 .thumbnail[aria-current]:focus-visible {
   box-shadow: 0 0 0 0.3rem rgb(var(--color-background)),0 0 0rem 0.5rem rgba(var(--color-foreground), 0.5);
 }

assets/theme-editor.js

@@ -18,3 +18,13 @@ document.addEventListener('shopify:block:deselect', function(event) {
   const parentSlideshowComponent = event.target.closest('slideshow-component');
   if (parentSlideshowComponent.autoplayButtonIsSetToPlay) parentSlideshowComponent.play();
 });
+
+document.addEventListener('shopify:section:load', () => {
+  const zoomOnHoverScript = document.querySelector('[id^=EnableZoomOnHover]');
+  if (!zoomOnHoverScript) return;
+  if (zoomOnHoverScript) {
+    const newScriptTag = document.createElement('script');
+    newScriptTag.src = zoomOnHoverScript.src;
+    zoomOnHoverScript.parentNode.replaceChild(newScriptTag, zoomOnHoverScript);
+  }
+});

locales/cs.schema.json

@@ -1895,6 +1895,19 @@
           "options__2": {
             "label": "Vpravo"
           }
+        },
+        "image_zoom": {
+          "label": "Zvětšení obrázků",
+          "info": "Klikněte a podržte kurzor nad výchozími možnostmi. Tím otevřete Lightbox na mobilním zařízení.",
+          "options__1": {
+            "label": "Otevřít Lightbox"
+          },
+          "options__2": {
+            "label": "Kliknout a podržet kurzor"
+          },
+          "options__3": {
+            "label": "Bez zvětšení"
+          }
         }
       }
     },

locales/da.schema.json

@@ -1895,6 +1895,19 @@
           "options__2": {
             "label": "Højre"
           }
+        },
+        "image_zoom": {
+          "label": "Billedzoom",
+          "info": "Klik og hold musen over standarder for at åbne lightbox på mobilen.",
+          "options__1": {
+            "label": "Åbn lightbox"
+          },
+          "options__2": {
+            "label": "Klik og hold musen over"
+          },
+          "options__3": {
+            "label": "Ingen zoom"
+          }
         }
       }
     },

locales/de.schema.json

@@ -1894,6 +1894,19 @@
           "options__2": {
             "label": "Rechts"
           }
+        },
+        "image_zoom": {
+          "label": "Bildzoom",
+          "info": "Klicke auf und fahre mit der Maus über \"Standards\", um Lightbox auf deinem Mobilgerät zu öffnen.",
+          "options__1": {
+            "label": "Lightbox öffnen"
+          },
+          "options__2": {
+            "label": "Klicken und mit der Maus darüber fahren"
+          },
+          "options__3": {
+            "label": "Nicht zoomen"
+          }
         }
       },
       "name": "Produktinformationen"

locales/en.default.schema.json

@@ -2032,6 +2032,19 @@
             "label": "Large"
           }
         },
+        "image_zoom": {
+          "label": "Image zoom",
+          "info": "Click and hover defaults to open lightbox on mobile.",
+          "options__1": {
+            "label": "Open lightbox"
+          },
+          "options__2": {
+            "label": "Click and hover"
+          },
+          "options__3": {
+            "label": "No zoom"
+          }
+        },
         "media_position": {
           "label": "Desktop media position",
           "info": "Position is automatically optimized for mobile.",

locales/es.schema.json

@@ -1895,6 +1895,19 @@
           "options__2": {
             "label": "Derecha"
           }
+        },
+        "image_zoom": {
+          "label": "Ampliar imagen",
+          "info": "En dispositivos móviles, la opción Hacer clic y pasar sobre el elemento cambia a Abrir Lightbox de forma predeterminada.",
+          "options__1": {
+            "label": "Abrir Lightbox"
+          },
+          "options__2": {
+            "label": "Hacer clic y pasar sobre el elemento"
+          },
+          "options__3": {
+            "label": "Sin zoom"
+          }
         }
       }
     },

locales/fi.schema.json

@@ -1894,6 +1894,19 @@
           "options__2": {
             "label": "Oikea"
           }
+        },
+        "image_zoom": {
+          "label": "Kuvan zoomaus",
+          "info": "Avaa lightbox-ikkuna mobiililaitteessa napsauttamalla oletusarvoja ja viemällä osoitin niiden päälle.",
+          "options__1": {
+            "label": "Avaa lightbox-ikkuna"
+          },
+          "options__2": {
+            "label": "Napsauta ja vie osoitin päälle"
+          },
+          "options__3": {
+            "label": "Ei zoomausta"
+          }
         }
       },
       "name": "Tuotetiedot"

locales/fr.schema.json

@@ -1894,6 +1894,19 @@
           "options__2": {
             "label": "Droite"
           }
+        },
+        "image_zoom": {
+          "label": "Le zoom sur image",
+          "info": "Cliquez et passez la souris sur les éléments par défaut pour ouvrir lightbox sur mobile.",
+          "options__1": {
+            "label": "Ouvrir lightbox"
+          },
+          "options__2": {
+            "label": "Cliquer et passer la souris"
+          },
+          "options__3": {
+            "label": "Pas de zoom"
+          }
         }
       },
       "name": "Informations produits"

locales/it.schema.json

@@ -1895,6 +1895,19 @@
           "options__2": {
             "label": "A destra"
           }
+        },
+        "image_zoom": {
+          "label": "Zoom immagine",
+          "info": "Clicca e fai scorrere il mouse sopra le impostazioni predefinite per aprire una lightbox sul dispositivo mobile.",
+          "options__1": {
+            "label": "Apri la lightbox"
+          },
+          "options__2": {
+            "label": "Clicca e fai scorrere il mouse"
+          },
+          "options__3": {
+            "label": "Nessuno zoom"
+          }
         }
       }
     },

locales/ja.schema.json

@@ -1895,6 +1895,19 @@
           "options__2": {
             "label": "右"
           }
+        },
+        "image_zoom": {
+          "label": "画像ズーム",
+          "info": "デフォルト設定では、クリックしてカーソルを合わせると、モバイルのLightboxが開きます。",
+          "options__1": {
+            "label": "Lightboxを開く"
+          },
+          "options__2": {
+            "label": "クリックしてカーソルを合わせる"
+          },
+          "options__3": {
+            "label": "ズームなし"
+          }
         }
       }
     },

locales/ko.schema.json

@@ -1895,6 +1895,19 @@
           "options__2": {
             "label": "오른쪽"
           }
+        },
+        "image_zoom": {
+          "label": "이미지 확대/축소",
+          "info": "클릭 및 커서 올리기는 모바일에서 라이트박스 열기로 기본값이 설정됩니다.",
+          "options__1": {
+            "label": "라이트박스 열기"
+          },
+          "options__2": {
+            "label": "클릭 및 커서 올리기"
+          },
+          "options__3": {
+            "label": "확대/축소 안 함"
+          }
         }
       }
     },

locales/nb.schema.json

@@ -1894,6 +1894,19 @@
           "options__2": {
             "label": "Høyre"
           }
+        },
+        "image_zoom": {
+          "label": "Bildezoom",
+          "info": "Standard for klikk og markør for å åpne lysboks på mobil.",
+          "options__1": {
+            "label": "Åpne lysboks"
+          },
+          "options__2": {
+            "label": "Klikk og hold markøren over"
+          },
+          "options__3": {
+            "label": "Ingen zoom"
+          }
         }
       },
       "name": "Produktinformasjon"

locales/nl.schema.json

@@ -1895,6 +1895,19 @@
           "options__2": {
             "label": "Rechts"
           }
+        },
+        "image_zoom": {
+          "label": "Inzoomen op afbeelding",
+          "info": "Standaarden voor klikken en aanwijzen om Lightbox te openen op mobiel.",
+          "options__1": {
+            "label": "Lightbox openen"
+          },
+          "options__2": {
+            "label": "Klikken en aanwijzen"
+          },
+          "options__3": {
+            "label": "Geen zoom"
+          }
         }
       }
     },

locales/pl.schema.json

@@ -1895,6 +1895,19 @@
           "options__2": {
             "label": "Prawa strona"
           }
+        },
+        "image_zoom": {
+          "label": "Powiększenie obrazu",
+          "info": "Kliknij i najedź kursorem na wartości domyślne, aby otworzyć lightbox na urządzeniu mobilnym.",
+          "options__1": {
+            "label": "Otwórz lightbox"
+          },
+          "options__2": {
+            "label": "Kliknij i najedź kursorem"
+          },
+          "options__3": {
+            "label": "Bez powiększenia"
+          }
         }
       }
     },

locales/pt-BR.schema.json

@@ -1894,6 +1894,19 @@
           "options__2": {
             "label": "Direita"
           }
+        },
+        "image_zoom": {
+          "label": "Zoom de imagem",
+          "info": "Clique e passe o cursor para abrir a janela modal no celular.",
+          "options__1": {
+            "label": "Abrir janela modal"
+          },
+          "options__2": {
+            "label": "Clicar e passar o cursor"
+          },
+          "options__3": {
+            "label": "Sem zoom"
+          }
         }
       },
       "name": "Informações do produto"

locales/pt-PT.schema.json

@@ -1895,6 +1895,19 @@
           "options__2": {
             "label": "Direita"
           }
+        },
+        "image_zoom": {
+          "label": "Zoom da imagem",
+          "info": "Clique e passe o cursor para abrir a janela modal (lightbox) no telemóvel.",
+          "options__1": {
+            "label": "Abrir janela modal (lightbox)"
+          },
+          "options__2": {
+            "label": "Clicar e passar o cursor"
+          },
+          "options__3": {
+            "label": "Sem zoom"
+          }
         }
       }
     },