Add photoswipe

docs/assets/javascript/shop.js

@@ -533,11 +533,22 @@ document.addEventListener("DOMContentLoaded", () => {
 
       if (images) {
         images.forEach(img => {
-          const $figure = El("shop-product-image image is-square", "figure");
+          const $figure = El("shop-product-image image is-square", "a");
+          $figure.href = img.url;
+          $figure.dataset.pswpHeight = img.height;
+          $figure.dataset.pswpWidth = img.width;
+          $figure.target = "_blank";
           const $img = document.createElement("img");
           $img.src = img.url;
           $figure.appendChild($img);
           $carousel.appendChild($figure);
+
+          const lightbox = new window.PhotoSwipeLightbox({
+            gallery: '.shop-product-image',
+            pswpModule: window.PhotoSwipe
+          });
+
+          lightbox.init();
         });
 
         $images.appendChild($carousel);

docs/shop.html

@@ -9,6 +9,8 @@ breadcrumb:
   - shop
 ---
 
+<link rel="stylesheet" type="text/css" href="https://unpkg.com/photoswipe@5.4.4/dist/photoswipe.css">
+
 <style type="text/css">
   :root {
     --shop-duration: 500ms;
@@ -287,8 +289,9 @@ breadcrumb:
 
   .shop-product-image {
     flex-shrink: 0;
-    cursor: pointer;
+    cursor: zoom-in;
     overflow: hidden;
+    outline: none !important;
   }
 
   .shop-product-image img {
@@ -298,7 +301,7 @@ breadcrumb:
   }
 
   .shop-product-images:hover img {
-    transform: scale(1.1);
+    transform: scale(1.04);
   }
 
   .shop-product-heading {
@@ -496,4 +499,6 @@ breadcrumb:
 </div>
 
 <script src="https://unpkg.com/@shopify/storefront-api-client@1.0.0/dist/umd/storefront-api-client.min.js"></script>
+<script src="https://unpkg.com/photoswipe@5.4.4/dist/umd/photoswipe.umd.min.js"></script>
+<script src="https://unpkg.com/photoswipe@5.4.4/dist/umd/photoswipe-lightbox.umd.min.js"></script>
 <script type="text/javascript" src="{{ site.url }}/assets/javascript/shop.js"></script>