Add image popup effect

Author: cotes2020

_includes/css-selector.html

@@ -8,3 +8,8 @@
   <link rel="stylesheet"
     href="https://cdn.jsdelivr.net/gh/afeld/[email protected]/dist/bootstrap-toc.min.css">
 {% endif %}
+
+{% if page.layout == 'page' or page.layout == 'post' %}
+  <!-- Manific Popup -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/magnific-popup.min.css">
+{% endif %}

_includes/js-selector.html

@@ -10,12 +10,19 @@
   {% endif %}
 {% endif %}
 
+{% if page.layout == 'post' or page.layout == 'page' %}
+  <!-- image lazy-loading & popup -->
+  <script async
+    src="https://cdn.jsdelivr.net/combine/npm/lozad/dist/lozad.min.js,npm/magnific-popup@1/dist/jquery.magnific-popup.min.js"></script>
+{% endif %}
+
 {% if page.layout == 'home'
+    or page.layout == 'categories'
     or page.layout == 'post'
-    or page.layout == 'categories' %}
+    or page.layout == 'page' %}
   {% assign type = page.layout %}
 {% else %}
-  {% assign type = "page" %}
+  {% assign type = "commons" %}
 {% endif %}
 
 {% assign js = type | prepend: '/assets/js/dist/' | append: '.min.js' %}

_includes/lozad.html

@@ -46,7 +46,6 @@
   {% assign _content = _content | replace: '<img src="/', img_path_replacement %}
 
   <!-- lazy-load images <https://github.com/ApoorvSaxena/lozad.js#usage> -->
-  {% assign lozad = true %}
   {% assign img_placehodler
     = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' %}
 
@@ -60,7 +59,3 @@
 
 <!-- return -->
 {{ _content }}
-
-{% if lozad %}
-  {% include lozad.html %}
-{% endif %}

_includes/refactor-content.html

@@ -0,0 +1,48 @@
+/**
+  Lazy load images (https://github.com/ApoorvSaxena/lozad.js)
+  and popup when clicked (https://github.com/dimsemenov/Magnific-Popup)
+*/
+
+$(function() {
+
+  const IMG_SCOPE = '#main > div.row:first-child > div:first-child';
+
+  if ($(`${IMG_SCOPE} img`).length <= 0 ) {
+    return;
+  }
+
+  /* lozy loading */
+
+  const imgs = document.querySelectorAll(`${IMG_SCOPE} img[data-src]`);
+  const observer = lozad(imgs);
+  observer.observe();
+
+  /* popup */
+
+  $(`${IMG_SCOPE} p > img[data-src],${IMG_SCOPE} img[data-src].preview-img`).each(
+    function() {
+      let nextTag = $(this).next();
+      const title = nextTag.prop('tagName') === 'EM' ? nextTag.text() : '';
+      const src = $(this).attr('data-src'); // created by lozad.js
+
+      $(this).wrap(`<a href="${src}" title="${title}" class="popup"></a>`);
+    }
+  );
+
+  $('.popup').magnificPopup({
+    type: 'image',
+    closeOnContentClick: true,
+    showCloseBtn: false,
+    zoom: {
+      enabled: true,
+      duration: 300,
+      easing: 'ease-in-out'
+    }
+  });
+
+
+  /* markup the image links */
+  $(`${IMG_SCOPE} a`).has("img").addClass('img-link');
+
+});
+

_javascript/commons/img-link.js

@@ -363,44 +363,24 @@ footer {
   overflow-wrap: break-word;
   word-wrap: break-word;
 
-  @mixin img-caption {
-    + em {
-      display: block;
-      text-align: center;
-      font-style: normal;
-      font-size: 80%;
-      padding: 0;
-      color: #6d6c6c;
-    }
-  }
-
-  @mixin img-style($caption: false) {
-
-    img[data-src] {
-      margin: 0.5rem 0;
-
-      @if $caption {
-        @include img-caption;
-      }
-
-      &.left {
-        float: left;
-        margin: 0.75rem 1rem 1rem 0;
-      }
+  img[data-src] {
+    margin: 0.5rem 0;
 
-      &.right {
-        float: right;
-        margin: 0.75rem 0 1rem 1rem;
-      }
+    &.left {
+      float: left;
+      margin: 0.75rem 1rem 1rem 0;
+    }
 
-      &.shadow {
-        filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
-      }
+    &.right {
+      float: right;
+      margin: 0.75rem 0 1rem 1rem;
+    }
 
+    &.shadow {
+      filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.08));
     }
-  }
 
-  @include img-style(true);
+  }
 
   a {
     blockquote & {
@@ -415,17 +395,27 @@ footer {
       }
     }
 
-    &.img-link {
-      @include img-style;
-      @include img-caption;
+    &.popup { // created by `_includes/img-extra.html`
+      cursor: zoom-in;
+
+      > img[data-src]:not(.normal):not(.left):not(.right) {
+        @include align-center;
+      }
     }
-  }
 
-  > p {
-    > img[data-src]:not(.normal):not(.left):not(.right) {
-      @include align-center;
+    &.img-link {
+      + em {
+        display: block;
+        text-align: center;
+        font-style: normal;
+        font-size: 80%;
+        padding: 0;
+        color: #6d6c6c;
+      }
     }
-  }
+
+  } // a
+
 
   ul {
     // attribute 'hide-bullet' was added by liquid
@@ -584,6 +574,14 @@ footer {
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
 }
 
+/* --- override magnific-popup --- */
+
+figure .mfp-title {
+  text-align: center;
+  padding-right: 0;
+  margin-top: 0.5rem;
+}
+
 /* --- sidebar layout --- */
 
 $tab-count: 5 !default;