Separate fancybox scripts

layout/_third-party/fancybox.njk

@@ -0,0 +1,3 @@
+{%- if theme.fancybox %}
+  {{ next_js('third-party/fancybox.js') }}
+{%- endif %}

layout/_third-party/index.njk

@@ -17,4 +17,6 @@
 {%- include 'tags/pdf.njk' -%}
 {%- include 'tags/mermaid.njk' -%}
 
+{%- include 'fancybox.njk' -%}
+
 {%- include 'nprogress.njk' -%}

scripts/filters/minify.js

@@ -133,6 +133,10 @@ hexo.extend.filter.register('after_generate', () => {
   }
 
   // Others
+  if (!theme.fancybox) {
+    hexo.route.remove('js/third-party/fancybox.js');
+  }
+
   if (!theme.nprogress.enable) {
     hexo.route.remove('js/third-party/nprogress.js');
   }

scripts/helpers/next-config.js

@@ -19,7 +19,6 @@ hexo.extend.helper.register('next_config', function() {
     sidebar   : theme.sidebar,
     copycode  : theme.codeblock.copy_button.enable,
     bookmark  : theme.bookmark,
-    fancybox  : theme.fancybox,
     mediumzoom: theme.mediumzoom,
     lazyload  : theme.lazyload,
     pangu     : theme.pangu,

source/js/next-boot.js

@@ -63,7 +63,6 @@ NexT.boot.refresh = function() {
    * Need to add config option in Front-End at 'scripts/helpers/next-config.js' file.
    */
   CONFIG.prism && window.Prism.highlightAll();
-  CONFIG.fancybox && NexT.utils.wrapImageWithFancyBox();
   CONFIG.mediumzoom && window.mediumZoom('.post-body :not(a) > img, .post-body > img', {
     background: 'var(--content-bg-color)'
   });

source/js/third-party/fancybox.js

@@ -0,0 +1,38 @@
+document.addEventListener('page:loaded', () => {
+
+  /**
+   * Wrap images with fancybox.
+   */
+  document.querySelectorAll('.post-body :not(a) > img, .post-body > img').forEach(element => {
+    const $image = $(element);
+    const imageLink = $image.attr('data-src') || $image.attr('src');
+    const $imageWrapLink = $image.wrap(`<a class="fancybox fancybox.image" href="${imageLink}" itemscope itemtype="http://schema.org/ImageObject" itemprop="url"></a>`).parent('a');
+    if ($image.is('.post-gallery img')) {
+      $imageWrapLink.attr('data-fancybox', 'gallery').attr('rel', 'gallery');
+    } else if ($image.is('.group-picture img')) {
+      $imageWrapLink.attr('data-fancybox', 'group').attr('rel', 'group');
+    } else {
+      $imageWrapLink.attr('data-fancybox', 'default').attr('rel', 'default');
+    }
+
+    const imageTitle = $image.attr('title') || $image.attr('alt');
+    if (imageTitle) {
+      // Do not append image-caption if pandoc has already created a figcaption
+      if (!$imageWrapLink.next('figcaption').length) {
+        $imageWrapLink.append(`<p class="image-caption">${imageTitle}</p>`);
+      }
+      // Make sure img title tag will show correctly in fancybox
+      $imageWrapLink.attr('title', imageTitle).attr('data-caption', imageTitle);
+    }
+  });
+
+  $.fancybox.defaults.hash = false;
+  $('.fancybox').fancybox({
+    loop   : true,
+    helpers: {
+      overlay: {
+        locked: false
+      }
+    }
+  });
+});

source/js/utils.js

@@ -31,44 +31,6 @@ if (typeof DOMTokenList.prototype.replace !== 'function') {
 
 NexT.utils = {
 
-  /**
-   * Wrap images with fancybox.
-   */
-  wrapImageWithFancyBox: function() {
-    document.querySelectorAll('.post-body :not(a) > img, .post-body > img').forEach(element => {
-      const $image = $(element);
-      const imageLink = $image.attr('data-src') || $image.attr('src');
-      const $imageWrapLink = $image.wrap(`<a class="fancybox fancybox.image" href="${imageLink}" itemscope itemtype="http://schema.org/ImageObject" itemprop="url"></a>`).parent('a');
-      if ($image.is('.post-gallery img')) {
-        $imageWrapLink.attr('data-fancybox', 'gallery').attr('rel', 'gallery');
-      } else if ($image.is('.group-picture img')) {
-        $imageWrapLink.attr('data-fancybox', 'group').attr('rel', 'group');
-      } else {
-        $imageWrapLink.attr('data-fancybox', 'default').attr('rel', 'default');
-      }
-
-      const imageTitle = $image.attr('title') || $image.attr('alt');
-      if (imageTitle) {
-        // Do not append image-caption if pandoc has already created a figcaption
-        if (!$imageWrapLink.next('figcaption').length) {
-          $imageWrapLink.append(`<p class="image-caption">${imageTitle}</p>`);
-        }
-        // Make sure img title tag will show correctly in fancybox
-        $imageWrapLink.attr('title', imageTitle).attr('data-caption', imageTitle);
-      }
-    });
-
-    $.fancybox.defaults.hash = false;
-    $('.fancybox').fancybox({
-      loop   : true,
-      helpers: {
-        overlay: {
-          locked: false
-        }
-      }
-    });
-  },
-
   registerExtURL: function() {
     document.querySelectorAll('span.exturl').forEach(element => {
       const link = document.createElement('a');