Upgrade to fancybox 5 (#677)

_vendors.yml

@@ -53,23 +53,18 @@ pjax:
   file: pjax.min.js
   alias: next-theme-pjax
   integrity: sha256-vxLn1tSKWD4dqbMRyv940UYw4sXgMtYcK6reefzZrao=
-jquery:
-  name: jquery
-  version: 3.7.0
-  file: dist/jquery.min.js
-  integrity: sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=
 fancybox_js:
-  name: '@fancyapps/fancybox'
-  version: 3.5.7
-  file: dist/jquery.fancybox.min.js
-  alias: fancybox
-  integrity: sha256-yt2kYMy0w8AbtF89WXb2P1rfjcP/HTHLT7097U8Y5b8=
+  name: '@fancyapps/ui'
+  version: 5.0.20
+  file: dist/fancybox/fancybox.umd.js
+  alias: fancyapps-ui
+  integrity: sha256-q8XkJ6dj5VwSvzI8+nATCHHQG+Xv/dAZBCgqmu93zOY=
 fancybox_css:
-  name: '@fancyapps/fancybox'
-  version: 3.5.7
-  file: dist/jquery.fancybox.min.css
-  alias: fancybox
-  integrity: sha256-Vzbj7sDDS/woiFS3uNKo8eIuni59rjyNGtXfstRzStA=
+  name: '@fancyapps/ui'
+  version: 5.0.20
+  file: dist/fancybox/fancybox.css
+  alias: fancyapps-ui
+  integrity: sha256-RvRHGSuWAxZpXKV9lLDt2e+rZ+btzn48Wp4ueS3NZKs=
 mediumzoom:
   name: medium-zoom
   version: 1.0.8

scripts/helpers/next-vendors.js

@@ -15,7 +15,7 @@ hexo.extend.helper.register('js_vendors', function() {
     vendors.push('pjax');
   }
   if (theme.fancybox) {
-    vendors.push('jquery', 'fancybox_js');
+    vendors.push('fancybox_js');
   }
   if (theme.mediumzoom) {
     vendors.push('mediumzoom');

source/css/_common/components/post/post-body.styl

@@ -45,8 +45,8 @@
     margin-left: 4px;
   }
 
-  // For fancybox and pandoc
-  .image-caption, img + figcaption, .fancybox + figcaption {
+  // https://github.com/hexojs/hexo-renderer-marked/pull/264
+  img + figcaption, .fancybox + figcaption {
     color: $grey-dark;
     font-size: $font-size-small;
     font-weight: bold;

source/css/_common/outline/mobile.styl

@@ -53,7 +53,7 @@ if (hexo-config('mobile_layout_economy')) {
       }
 
       // Fix issue #641
-      .image-caption, img + figcaption, .fancybox + figcaption {
+      img + figcaption, .fancybox + figcaption {
         margin: -5px auto 15px !important;
       }
 

source/js/third-party/fancybox.js

@@ -1,38 +1,35 @@
+/* global Fancybox */
+
 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');
-    }
+  document.querySelectorAll('.post-body :not(a) > img, .post-body > img').forEach(image => {
+    const imageLink = image.dataset.src || image.src;
+    const imageWrapLink = document.createElement('a');
+    imageWrapLink.classList.add('fancybox');
+    imageWrapLink.href = imageLink;
+    imageWrapLink.setAttribute('itemscope', '');
+    imageWrapLink.setAttribute('itemtype', 'http://schema.org/ImageObject');
+    imageWrapLink.setAttribute('itemprop', 'url');
 
-    const imageTitle = $image.attr('title') || $image.attr('alt');
+    let dataFancybox = 'default';
+    if (image.closest('.post-gallery') !== null) {
+      dataFancybox = 'gallery';
+    } else if (image.closest('.group-picture') !== null) {
+      dataFancybox = 'group';
+    }
+    imageWrapLink.dataset.fancybox = dataFancybox;
+
+    const imageTitle = image.title || image.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);
+      imageWrapLink.title = imageTitle;
+      // Make sure img captions will show correctly in fancybox
+      imageWrapLink.dataset.caption = imageTitle;
     }
+    image.wrap(imageWrapLink);
   });
 
-  $.fancybox.defaults.hash = false;
-  $('.fancybox').fancybox({
-    loop   : true,
-    helpers: {
-      overlay: {
-        locked: false
-      }
-    }
-  });
+  Fancybox.bind('[data-fancybox]');
 });