Replace images on demo page

michaelbull · Mar 15, 2018 · ffce44c · ffce44c
1 parent a2100cf
commit ffce44c
Show file tree

Hide file tree

Showing 54 changed files with 171 additions and 117 deletions.
diff --git a/assets/aberporth-2000.jpeg b/assets/aberporth-2000.jpeg
diff --git a/assets/aberporth-800.jpeg b/assets/aberporth-800.jpeg
diff --git a/assets/beach-1600.jpeg b/assets/beach-1600.jpeg
diff --git a/assets/beach-600.jpeg b/assets/beach-600.jpeg
diff --git a/assets/carew-castle-2000.jpeg b/assets/carew-castle-2000.jpeg
diff --git a/assets/carew-castle-800.jpeg b/assets/carew-castle-800.jpeg
diff --git a/assets/city-960.jpeg b/assets/city-960.jpeg
diff --git a/assets/cliffs-near-manorbier-1000.jpeg b/assets/cliffs-near-manorbier-1000.jpeg
diff --git a/assets/cliffs-near-manorbier-2000.jpeg b/assets/cliffs-near-manorbier-2000.jpeg
diff --git a/assets/dock-1600.jpeg b/assets/dock-1600.jpeg
diff --git a/assets/dock-600.jpeg b/assets/dock-600.jpeg
diff --git a/assets/example.gif b/assets/example.gif
diff --git a/assets/favicon.ico b/assets/favicon.ico
diff --git a/assets/forest-3500.jpeg b/assets/forest-3500.jpeg
diff --git a/assets/forest-960.jpeg b/assets/forest-960.jpeg
diff --git a/assets/harbor-1000.jpeg b/assets/harbor-1000.jpeg
diff --git a/assets/harbor-1600.jpeg b/assets/harbor-1600.jpeg
diff --git a/assets/market-2000.jpeg b/assets/market-2000.jpeg
diff --git a/assets/market-800.jpeg b/assets/market-800.jpeg
diff --git a/assets/new-quay-1-2000.jpeg b/assets/new-quay-1-2000.jpeg
diff --git a/assets/new-quay-1-400.jpeg b/assets/new-quay-1-400.jpeg
diff --git a/assets/new-quay-3-2000.jpeg b/assets/new-quay-3-2000.jpeg
diff --git a/assets/new-quay-3-400.jpeg b/assets/new-quay-3-400.jpeg
diff --git a/assets/new-quay-4-800.jpeg b/assets/new-quay-4-800.jpeg
diff --git a/assets/panda-1000.jpeg b/assets/panda-1000.jpeg
diff --git a/assets/panda-400.jpeg b/assets/panda-400.jpeg
diff --git a/assets/pembroke-castle-1000.jpeg b/assets/pembroke-castle-1000.jpeg
diff --git a/assets/pembroke-castle-2000.jpeg b/assets/pembroke-castle-2000.jpeg
diff --git a/assets/sandwich-1600.jpeg b/assets/sandwich-1600.jpeg
diff --git a/assets/sandwich-600.jpeg b/assets/sandwich-600.jpeg
diff --git a/assets/sea-1000.jpeg b/assets/sea-1000.jpeg
diff --git a/assets/sea-1600.jpeg b/assets/sea-1600.jpeg
diff --git a/assets/seagull-2000.jpeg b/assets/seagull-2000.jpeg
diff --git a/assets/seagull-400.jpeg b/assets/seagull-400.jpeg
diff --git a/assets/seagulls-1000.jpeg b/assets/seagulls-1000.jpeg
diff --git a/assets/seagulls-2000.jpeg b/assets/seagulls-2000.jpeg
diff --git a/assets/st-carannog-1000.jpeg b/assets/st-carannog-1000.jpeg
diff --git a/assets/st-carannog-400.jpeg b/assets/st-carannog-400.jpeg
diff --git a/assets/street-1000.jpeg b/assets/street-1000.jpeg
diff --git a/assets/street-1400.jpeg b/assets/street-1400.jpeg
diff --git a/assets/sunflower-1200.jpeg b/assets/sunflower-1200.jpeg
diff --git a/assets/sunflower-400.jpeg b/assets/sunflower-400.jpeg
diff --git a/assets/tenby-2000.jpeg b/assets/tenby-2000.jpeg
diff --git a/assets/tenby-600.jpeg b/assets/tenby-600.jpeg
diff --git a/assets/toast-1200.jpeg b/assets/toast-1200.jpeg
diff --git a/assets/toast-600.jpeg b/assets/toast-600.jpeg
diff --git a/assets/tower-1000.jpeg b/assets/tower-1000.jpeg
diff --git a/assets/tower-2000.jpeg b/assets/tower-2000.jpeg
diff --git a/assets/tresaith-waterfall-1000.jpeg b/assets/tresaith-waterfall-1000.jpeg
diff --git a/assets/tresaith-waterfall-2000.jpeg b/assets/tresaith-waterfall-2000.jpeg
diff --git a/example/index.ejs b/example/index.ejs
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <link rel="shortcut icon" href="<%= require('../assets/favicon.ico') %>">
-    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|PT+Serif:400,400i" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700|PT+Serif:400,400i" rel="stylesheet">
 
   </head>
 
@@ -28,14 +28,12 @@
       <figure>
         <img
           class="zoom__image"
-          src="<%= require('../assets/seagulls-1000.jpeg') %>"
-          data-width="2896"
-          data-height="1931"
-          data-src="<%= require('../assets/seagulls-2000.jpeg') %>"
+          src="<%= require('../assets/cliffs-near-manorbier-1000.jpeg') %>"
+          data-width="2000"
+          data-height="1333"
+          data-src="<%= require('../assets/cliffs-near-manorbier-2000.jpeg') %>"
         />
-        <figcaption>
-          <a href="https://medium.com/@nick" target="_blank">@nick</a>
-        </figcaption>
+        <figcaption>Cliffs near Manorbier</figcaption>
       </figure>
 
       <div class="column">
@@ -49,43 +47,77 @@
       <figure>
         <img
           class="zoom__image"
-          src="<%= require('../assets/tower-1000.jpeg') %>"
-          data-width="2048"
-          data-height="1366"
-          data-src="<%= require('../assets/tower-2000.jpeg') %>"
+          src="<%= require('../assets/tresaith-waterfall-1000.jpeg') %>"
+          data-width="2000"
+          data-height="1333"
+          data-src="<%= require('../assets/tresaith-waterfall-2000.jpeg') %>"
         />
-        <figcaption>
-          <a href="https://medium.com/@dpup" target="_blank">@dpup</a>
-        </figcaption>
+        <figcaption>Tresaith Waterfall</figcaption>
       </figure>
 
       <div class="column">
         <h2>Ready when you are</h2>
         <p>Another significant detail is the lack of loading indicators — we’re always ready to zoom. We prepare all images to zoom right after the content has loaded. If the full-size image isn’t loaded, we transition the original image and replace it when the detailed image is ready. We don’t allow your connection speed to affect the animation, creating an ultra-snappy interaction. More often than not, the images are swapped before the transition comes to an end.</p>
+      </div>
+
+      <figure>
+        <div class="image-triple">
+          <div class="image-cell" style="width: 33.333%;">
+            <img
+              class="zoom__image"
+              src="<%= require('../assets/new-quay-1-400.jpeg') %>"
+              data-width="2000"
+              data-height="1333"
+              data-src="<%= require('../assets/new-quay-1-2000.jpeg') %>"
+            />
+          </div>
+
+          <div class="image-cell" style="width: 33.333%;">
+            <img
+              class="zoom__image"
+              src="<%= require('../assets/new-quay-3-400.jpeg') %>"
+              data-width="2000"
+              data-height="1333"
+              data-src="<%= require('../assets/new-quay-3-2000.jpeg') %>"
+            />
+          </div>
+
+          <div class="image-cell" style="width: 33.333%;">
+            <img
+              class="zoom__image"
+              src="<%= require('../assets/seagull-400.jpeg') %>"
+              data-width="2000"
+              data-height="1333"
+              data-src="<%= require('../assets/seagull-2000.jpeg') %>"
+            />
+          </div>
+        </div>
 
-        <hr />
+        <figcaption>New Quay</figcaption>
+      </figure>
 
+      <div class="column">
         <figure class="pull-right">
           <img
             class="zoom__image"
-            src="<%= require('../assets/forest-960.jpeg') %>"
-            data-width="3500"
-            data-height="2333"
-            data-src="<%= require('../assets/forest-3500.jpeg') %>"
+            src="<%= require('../assets/aberporth-800.jpeg') %>"
+            data-width="4816"
+            data-height="3211"
+            data-src="<%= require('../assets/aberporth-2000.jpeg') %>"
           />
         </figure>
 
         <p>Images come a variety of sizes, as such <strong>zoom.ts</strong> adapts to wherever you place your image on the page and repositions the image if the browser is resized whilst an image is expanded.</p>
         <p>You may wish to justify your image to align it with the flow of text, avoiding the thematic break that typical block spaced images produce. The zooming experience doesn’t change for these cases.</p>
+      </div>
 
-        <hr />
-
+      <div class="column">
         <figure class="pull-left">
           <img
             class="zoom__image"
-            src="<%= require('../assets/city-960.jpeg') %>"
-            data-width="960"
-            data-height="1931"
+            src="<%= require('../assets/new-quay-4-800.jpeg') %>"
+            data-width="800"
+            data-height="533"
           />
         </figure>
 
@@ -96,101 +128,69 @@
       <hr />
 
       <figure>
-        <div class="image-row">
-          <div class="image-row__column" style="width: 50%;">
-            <img
-              class="zoom__image"
-              src="<%= require('../assets/dock-600.jpeg') %>"
-              data-width="4032"
-              data-height="3024"
-              data-src="<%= require('../assets/dock-1600.jpeg') %>"
-            />
-          </div>
-
-          <div class="image-row__column" style="width: 50%;">
-            <img
-              class="zoom__image"
-              src="<%= require('../assets/beach-600.jpeg') %>"
-              data-width="4032"
-              data-height="3024"
-              data-src="<%= require('../assets/beach-1600.jpeg') %>"
-            />
-          </div>
-        </div>
-
-        <figcaption>
-          <a href="https://medium.com/fragmented-moments/photoessay-moments-in-hong-kong-5c2776cf8678" target="_blank">
-            Photoessay: Moments in Hong Kong – Fragmented moments
-          </a>
-        </figcaption>
-      </figure>
-
-      <hr />
-
-      <figure>
-        <div class="image-row">
-          <div class="image-row__column" style="width: 63.994%;">
+        <div class="image-double">
+          <div class="image-cell" style="width: 69.22%;">
             <img
               class="zoom__image"
-              src="<%= require('../assets/market-800.jpeg') %>"
-              data-width="4032"
-              data-height="3024"
-              data-src="<%= require('../assets/market-2000.jpeg') %>"
+              src="<%= require('../assets/carew-castle-800.jpeg') %>"
+              data-width="2000"
+              data-height="1333"
+              data-src="<%= require('../assets/carew-castle-2000.jpeg') %>"
             />
           </div>
-          <div class="image-row__column" style="width: 36.006%;">
+          <div class="image-cell" style="width: 30.78%;">
             <img
               class="zoom__image"
-              src="<%= require('../assets/panda-400.jpeg') %>"
-              data-width="3024"
-              data-height="4032"
-              data-src="<%= require('../assets/panda-1000.jpeg') %>"
+              src="<%= require('../assets/st-carannog-400.jpeg') %>"
+              data-width="1000"
+              data-height="1500"
+              data-src="<%= require('../assets/st-carannog-1000.jpeg') %>"
             />
           </div>
         </div>
 
-        <div class="image-row">
-          <div class="image-row__column" style="width: 42.863%;">
+        <div class="image-double">
+          <div class="image-cell" style="width: 39.984%;">
             <img
               class="zoom__image"
-              src="<%= require('../assets/toast-600.jpeg') %>"
-              data-width="1536"
-              data-height="1536"
-              data-src="<%= require('../assets/toast-1200.jpeg') %>"
+              src="<%= require('../assets/sunflower-400.jpeg') %>"
+              data-width="1200"
+              data-height="1200"
+              data-src="<%= require('../assets/sunflower-1200.jpeg') %>"
             />
           </div>
-          <div class="image-row__column" style="width: 57.137%;">
+          <div class="image-cell" style="width: 60.016%;">
             <img
               class="zoom__image"
-              src="<%= require('../assets/sandwich-600.jpeg') %>"
-              data-width="1536"
-              data-height="1152"
-              data-src="<%= require('../assets/sandwich-1600.jpeg') %>"
+              src="<%= require('../assets/tenby-600.jpeg') %>"
+              data-width="2000"
+              data-height="1333"
+              data-src="<%= require('../assets/tenby-2000.jpeg') %>"
             />
           </div>
         </div>
 
-        <div class="image-row">
-          <div class="image-row__column">
+        <div class="image-double">
+          <div class="image-cell">
             <img
               class="zoom__image"
-              src="<%= require('../assets/harbor-1000.jpeg') %>"
-              data-width="3819"
-              data-height="2864"
-              data-src="<%= require('../assets/harbor-1600.jpeg') %>"
+              src="<%= require('../assets/pembroke-castle-1000.jpeg') %>"
+              data-width="2000"
+              data-height="1333"
+              data-src="<%= require('../assets/pembroke-castle-2000.jpeg') %>"
             />
           </div>
         </div>
-
-        <figcaption>
-          <a href="https://medium.com/@wynlim" target="_blank">@wynlim</a>
-        </figcaption>
       </figure>
 
       <hr />
 
       <div class="column column--credits">
-        <p><em>Full credits to <a href="https://medium.design/@b" target="_blank">Brad Birdsall</a> for the <a href="https://medium.design/image-zoom-on-medium-24d146fc0c20" target="_blank">original version</a> of this article.</em></p>
+        <p>
+          Full credits to <a href="https://medium.design/@b" target="_blank">Brad Birdsall</a> for the <a href="https://medium.design/image-zoom-on-medium-24d146fc0c20" target="_blank">original version</a> of this article
+          <br />
+          Special thanks to <a href="https://www.grahamedgecombe.com/photos" target="_blank">Graham Edgecombe</a> for the photographs
+        </p>
       </div>
     </main>
   </body>