Srcset zoom

examples/demo/demo.js

@@ -26,6 +26,8 @@
   var zoomToDetach = mediumZoom('#zoom-detach')
   zoomToDetach.addEventListeners('hidden', zoomToDetach.detach)
 
+  mediumZoom('.zoom-srcset')
+
   // Add zooms to a container
   var containerZoom = [
     mediumZoom('#zoom-default'),

examples/demo/development/index.html

@@ -27,6 +27,7 @@ <h1 class="header__title">Medium Zoom</h1>
     </header>
 
     <article class="container">
+
       <figure>
         <img
           id="zoom-default"
@@ -166,6 +167,50 @@ <h1 class="header__title">Medium Zoom</h1>
         <figcaption>Zoom detached after being zoomed once</figcaption>
       </figure>
 
+      <p class="placeholder">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti provident sunt recusandae enim commodi ab dolorem ipsum
+        dolor magni reprehenderit accusantium quasi a autem neque asperiores, tenetur impedit repudiandae quos.
+      </p>
+
+      <p class="placeholder">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti provident sunt recusandae enim commodi ab dolorem ipsum
+        dolor magni reprehenderit accusantium quasi a autem neque asperiores, tenetur impedit repudiandae quos.
+      </p>
+
+      <figure>
+        <img
+          class="zoom-srcset"
+          src="//placehold.it/1200x800?text=fallback_src"
+          srcset="//placehold.it/300x200?text=300x200 300w,
+                  //placehold.it/600x400?text=600x400 600w,
+                  //placehold.it/800x500?text=800x500 800w,
+                  //placehold.it/1000x650?text=1000x650 1000w,
+                  //placehold.it/1200x800?text=1200x800 1200w"
+          sizes="(max-width: 768px) 100vw, 768px"
+          alt="Zoom with srcset and default options">
+        <figcaption>Zoom with srcset and default options</figcaption>
+      </figure>
+
+      <p class="placeholder">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti provident sunt recusandae enim commodi ab dolorem ipsum
+        dolor magni reprehenderit accusantium quasi a autem neque asperiores, tenetur impedit repudiandae quos.
+      </p>
+
+      <figure style="margin-right: auto; margin-left: auto; max-width: 400px">
+        <img
+          class="zoom-srcset"
+          src="//placehold.it/1200x800?text=fallback_src"
+          srcset="//placehold.it/200x300?text=200x300 200w,
+                  //placehold.it/400x600?text=400x600 400w,
+                  //placehold.it/500x800?text=500x800 500w,
+                  //placehold.it/650x1000?text=650x1000 650w,
+                  //placehold.it/800x1200?text=800x1200 800w"
+          sizes="(max-width: 400px) 100vw, 400px"
+          data-zoom-target="//placehold.it/500x800?text=data-zoom-target"
+          alt="Zoom with srcset and data-zoom-target defined (zoom-target wins)">
+        <figcaption>Zoom with srcset and data-zoom-target defined (zoom-target wins)</figcaption>
+      </figure>
+
       <h2>History</h2>
 
       <blockquote id="history">

src/medium-zoom.js

@@ -159,6 +159,11 @@ const mediumZoom = (
 
     if (target.original.getAttribute('data-zoom-target')) {
       target.zoomedHd = target.zoomed.cloneNode()
+
+      // Reset scrset props on zoomedHd, else the hd image will not load
+      target.zoomedHd.setAttribute('srcset', '')
+      target.zoomedHd.setAttribute('sizes', '')
+
       target.zoomedHd.src = target.zoomed.getAttribute('data-zoom-target')
 
       target.zoomedHd.onerror = () => {
@@ -181,6 +186,26 @@ const mediumZoom = (
           animateTarget()
         }
       }, 10)
+    } else if (target.original.hasAttribute('srcset')) {
+      // If an image has a srcset, we don't know the dimensions of the
+      // zoomed (hd) image, like when data-zoom-target is specified.
+      // Therefore the approach is quite similar.
+      target.zoomedHd = target.zoomed.cloneNode()
+
+      // Resetting the sizes attribute tells the browser to load the
+      // image best fitting the current viewport size, respecting the srcset
+      target.zoomedHd.setAttribute('sizes', '')
+
+      // Wait for the load event of the hd image. This will fire if the image
+      // is already in cache
+      const loadEventListener = target.zoomedHd.addEventListener('load', () => {
+        // Clean up after ourselfes
+        target.zoomedHd.removeEventListener('load', loadEventListener)
+        target.zoomedHd.classList.add('medium-zoom-image--open')
+        target.zoomedHd.addEventListener('click', zoomOut)
+        document.body.appendChild(target.zoomedHd)
+        animateTarget()
+      })
     } else {
       animateTarget()
     }