[opt] fancybox 5.0

_config.yml

@@ -380,7 +380,7 @@ plugins:
   lazyload:
     enable: true # [hexo clean && hexo s] is required after changing this value.
     js: https://gcore.jsdelivr.net/npm/vanilla-lazyload@17.8.3/dist/lazyload.min.js
-    transition: blur # blur, fade
+    transition: fade # blur, fade
 
   # https://scrollrevealjs.org/api/reveal.html
   scrollreveal:
@@ -395,12 +395,12 @@ plugins:
   # available for {% image xxx %}
   fancybox:
     enable: true
-    js: https://gcore.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js
-    css: https://gcore.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.css
+    js: https://cdn.bootcdn.net/ajax/libs/fancyapps-ui/5.0.22/fancybox/fancybox.umd.min.js
+    css: https://cdn.bootcdn.net/ajax/libs/fancyapps-ui/5.0.22/fancybox/fancybox.min.css
     # 可以处理评论区的图片（不支持 iframe 类评论系统）例如：
     # 使用twikoo评论可以写: .tk-content img:not([class*="emo"])
     # 使用waline评论可以写: #waline_container .vcontent img
-    selector: .fancybox img # 多个选择器用英文逗号隔开
+    selector: # 多个选择器用英文逗号隔开
 
   # swiper
   swiper:

scripts/tags/lib/gallery.js

@@ -15,9 +15,11 @@
 
 'use strict'
 
+var index = 0
+
 function img(src, alt) {
   let img = ''
-  img += `<img src="${src}"`
+  img += `<img data-fancybox="gallery-${index}" src="${src}"`
   if (alt?.length > 0) {
     img += ` alt="${alt}"`
   }
@@ -44,7 +46,8 @@ module.exports = ctx => function(args, content) {
   if (args.layout == 'flow') {
     layoutType = 'flow'
   }
-  el += `<div class="tag-plugin gallery fancybox ${layoutType}-box" ${ctx.args.joinTags(args, ['size', 'ratio']).join(' ')}>`
+  index += 1
+  el += `<div class="tag-plugin gallery ${layoutType}-box" ${ctx.args.joinTags(args, ['size', 'ratio']).join(' ')}>`
   const img_mds = content.split('\n').filter(item => item.trim().length > 0)
   for (let md of img_mds) {
     const matches = md.match(/\!\[(.*?)\]\((.*?)\)/i)

scripts/tags/lib/image.js

@@ -25,10 +25,10 @@ module.exports = ctx => function(args) {
     }
     // 覆盖配置
     if (args.fancybox && args.fancybox.length > 0) {
-      if (args.fancybox == 'true') {
-        fancybox = true
-      } else if (args.fancybox == 'false') {
+      if (args.fancybox == 'false') {
         fancybox = false
+      } else {
+        fancybox = args.fancybox
       }
     }
   }
@@ -40,7 +40,7 @@ module.exports = ctx => function(args) {
       img += ' alt="' + alt + '"'
     }
     if (fancybox) {
-      img += ' fancybox="true"'
+      img += ` data-fancybox="${fancybox}"`
     }
     if (style.length > 0) {
       img += ' style="' + style + '"'

source/css/_plugins/fancybox.styl

@@ -1,6 +1,2 @@
-img[fancybox='true']
-  cursor: zoom-in
-
-.fancybox
-  img 
+img[data-fancybox]
   cursor: zoom-in

source/css/_plugins/lazyload.styl

@@ -1,31 +1,16 @@
-trans-cover($p, $t = 0.28s)
-  trans2pro: transform 0.5s $p $t
-trans-site($p)
-  trans2: box-shadow transform $p
-trans-user($p)
-  trans3: box-shadow transform $p
-
-if hexo-config('plugins.lazyload.transition') == 'blur'
 img.lazy
-    trans-cover filter
-    &:not(.loaded)
-      filter blur(8px)
-      -webkit-filter blur(8px)
-    &.loaded,&.error
-      filter none
-      -webkit-filter none
-  .site-card .card-link>img
-    trans-site filter
-  .user-card .card-link>img
-    trans-user filter
-else
-  img.lazy
-    trans-cover opacity 0.5s
   &:not(.loaded)
     opacity: 0
   &.loaded,&.error
     opacity: 1
-  .site-card .card-link>img
-    trans-site opacity
-  .user-card .card-link>img
-    trans-user opacity
+  if hexo-config('plugins.lazyload.transition') == 'blur'
+    trans1 all 0.75s
+    &:not(.loaded)
+      filter blur(50px)
+      -webkit-filter blur(50px)
+    &.loaded,&.error
+      filter none
+      -webkit-filter none
+  else
+    trans1 all 0.38s
+    

source/js/main.js

@@ -303,24 +303,9 @@ if (stellar.plugins.preload) {
   }
 }
 
-function loadFancybox() {
-  stellar.loadCSS(stellar.plugins.fancybox.css);
-  stellar.loadScript(stellar.plugins.fancybox.js, { defer: true }).then(function () {
-    Fancybox.bind(selector, {
-      groupAll: true,
-      hideScrollbar: false,
-      Thumbs: {
-        autoStart: false,
-      },
-      caption: function (fancybox, carousel, slide) {
-        return slide.$trigger.alt || null
-      }
-    });
-  })
-}
 // fancybox
 if (stellar.plugins.fancybox) {
-  let selector = 'img[fancybox]:not(.error)';
+  let selector = '[data-fancybox]:not(.error)';
   if (stellar.plugins.fancybox.selector) {
     selector += `, ${stellar.plugins.fancybox.selector}`
   }
@@ -332,16 +317,16 @@ if (stellar.plugins.fancybox) {
     }
   }
   if (needFancybox) {
+    console.log('need fancy', selector, document.querySelectorAll(selector) );
     stellar.loadCSS(stellar.plugins.fancybox.css);
     stellar.loadScript(stellar.plugins.fancybox.js, { defer: true }).then(function () {
       Fancybox.bind(selector, {
-        groupAll: true,
         hideScrollbar: false,
         Thumbs: {
           autoStart: false,
         },
-        caption: function (fancybox, carousel, slide) {
-          return slide.$trigger.alt || null
+        caption: (fancybox, slide) => {
+          return slide.triggerEl.alt || null
         }
       });
     })

source/js/plugins/memos.js

@@ -91,11 +91,10 @@ const MemosJS = {
           cell += '<div class="tag-plugin image">';
           for (let img of imgs) {
             if (img.externalLink?.length > 0) {
-              cell += `<div class="image-bg"><img src="${img.externalLink}" fancybox="true"></div>`;
+              cell += `<div class="image-bg"><img src="${img.externalLink}" data-fancybox="memos"></div>`;
             } else {
-              cell += `<div class="image-bg"><img src="https://${cfg.host}/o/r/${img.id}" fancybox="true"></div>`;
+              cell += `<div class="image-bg"><img src="https://${cfg.host}/o/r/${img.id}" data-fancybox="memos"></div>`;
             }
-            
           }
           cell += '</div>';
         }