优化灯箱

This commit is contained in:
1152958806@qq.com 2023-08-28 09:31:52 +08:00
parent c832e82c9d
commit 9deec1998a
6 changed files with 9 additions and 23 deletions

View File

@ -42,7 +42,7 @@
<h2 style="text-align:center;">[[${theme.config.photos.bigTitle}]]</h2>
<div class="gallery-group-main">
<th:block th:each="group : ${photoFinder.groupBy()}">
<figure class="gallery-group">
<figure class="gallery-group no-lightbox">
<img class="gallery-group-img no-lightbox"
th:src="${isLazyload ? loadingImg : #annotations.get(group, 'cover')}"
th:data-lazy-src="${ isLazyload ? #annotations.get(group, 'cover') : ''}"

View File

@ -374,8 +374,8 @@ document.addEventListener("DOMContentLoaded", () => {
function ($0, $1) {
var str = $1.split(",",4);
contents += `
<figure class="gallery-group group-two"">
<img class="gallery-group-img no-lightbox"
<figure class="gallery-group no-lightbox group-two"">
<img class="gallery-group-img"
src="${str[3]}"
alt="Group Image Gallery" >
<figcaption>

View File

@ -131,13 +131,8 @@ document.addEventListener('DOMContentLoaded', function () {
ele.each(function (i, o) {
const $this = $(o)
const lazyloadSrc = $this.attr('data-lazy-src') || $this.attr('src')
const lazyloadSrc1600 = lazyloadSrc + '_1600w'
const dataCaption = $this.attr('alt') || ''
if (lazyloadSrc.indexOf('!blogimg') != -1) {
$this.wrap(`<a href="${lazyloadSrc}" data-fancybox="images" data-caption="${dataCaption}" class="fancybox" data-srcset="${lazyloadSrc1600} 1600w"></a>`)
} else {
$this.wrap(`<a href="${lazyloadSrc}" data-fancybox="images" data-caption="${dataCaption}" class="fancybox" data-srcset="${lazyloadSrc} 1600w"></a>`)
}
$this.wrap(`<a href="${lazyloadSrc}" data-fancybox="images" data-caption="${dataCaption}" class="fancybox" data-srcset="${lazyloadSrc}"></a>`)
})
@ -163,7 +158,7 @@ document.addEventListener('DOMContentLoaded', function () {
const jqLoadAndRun = () => {
const $fancyboxEle = GLOBAL_CONFIG.lightbox === 'fancybox'
? document.querySelectorAll('#article-container :not(a):not(.gallery-group):not(.site-card-avatar):not(.flink-item-info):not(.rss-plan-info-group):not(.bangumi-picture):not(.introduction-card) > img, #article-container > img,.bber-container-img > img')
? document.querySelectorAll('#article-container :not(a):not(.rss-plan-info-group):not(.no-lightbox) > img, #article-container > img,.bber-container-img > img')
: []
const fbLengthNoZero = $fancyboxEle.length > 0
const $jgEle = document.querySelectorAll('#article-container .gallery')

View File

@ -89,9 +89,6 @@ var btf = {
}
}
/**
* fancybox
*/
@ -100,14 +97,8 @@ var btf = {
ele.each(function (i, o) {
const $this = $(o)
const lazyloadSrc = $this.attr('data-lazy-src') || $this.attr('src')
const lazyloadSrc1600 = lazyloadSrc + '_1600w'
const dataCaption = $this.attr('alt') || ''
if (lazyloadSrc.indexOf('!blogimg') != -1) {
$this.wrap(`<a href="${lazyloadSrc}" data-fancybox="images" data-caption="${dataCaption}" class="fancybox" data-srcset="${lazyloadSrc1600} 1600w"></a>`)
} else {
$this.wrap(`<a href="${lazyloadSrc}" data-fancybox="images" data-caption="${dataCaption}" class="fancybox" data-srcset="${lazyloadSrc} 1600w"></a>`)
}
$this.wrap(`<a href="${lazyloadSrc}" data-fancybox="images" data-caption="${dataCaption}" class="fancybox" data-srcset="${lazyloadSrc}"></a>`)
})
$().fancybox({

View File

@ -2,7 +2,7 @@
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:fragment="bangumi-item(spec)">
<div class="bangumi-item">
<div class="bangumi-picture">
<div class="bangumi-picture no-lightbox">
<img
th:src="${isLazyload ? loadingImg : spec.cover}"
th:data-lazy-src="${ isLazyload ? spec.cover : ''}"

View File

@ -101,7 +101,7 @@
<a class="info cf-friends-link" target="_blank" th:href="${link.spec.url}"
th:title="${link.spec.displayName}">
<div class="site-card-avatar">
<div class="site-card-avatar no-lightbox">
<img class="flink-avatar cf-friends-avatar" th:alt="${link.spec.displayName}"
th:src="${isLazyload ? loadingImg : link.spec.logo}"
@ -130,7 +130,7 @@
th:src="${isLazyload ? loadingImg : link.spec.logo}"
th:data-lazy-src="${ isLazyload ? link.spec.logo : ''}">
<div class="flink-item-info">
<div class="flink-item-info no-lightbox">
<span class="flink-item-name cf-friends-name" th:text="${link.spec.displayName}"></span>
<span class="flink-item-desc" th:text="${link.spec.description}"
th:title="${link.spec.description}"></span>