Upgrade to fancybox 5 (#677)

This commit is contained in:
Mimi 2023-07-26 10:49:28 +08:00 committed by GitHub
parent 8fd8f9247c
commit 8b8632f137
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 38 additions and 46 deletions

View File

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

View File

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

View File

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

View File

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

View File

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