评论图片预览

This commit is contained in:
1152958806@qq.com 2023-07-08 14:00:15 +08:00
parent a4452eee60
commit cf7887b912
4 changed files with 207 additions and 137 deletions

View File

@ -245,31 +245,31 @@ document.addEventListener('DOMContentLoaded', function () {
* 需要 jQuery
*/
// let detectJgJsLoad = false
// const runJustifiedGallery = function (ele) {
// const $justifiedGallery = $(ele)
// const $imgList = $justifiedGallery.find('img')
// $imgList.unwrap()
// if ($imgList.length) {
// $imgList.each(function (i, o) {
// if ($(o).attr('data-lazy-src')) $(o).attr('src', $(o).attr('data-lazy-src'))
// $(o).wrap('<div></div>')
// })
// }
//
// if (detectJgJsLoad) btf.initJustifiedGallery($justifiedGallery)
// else {
// $('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.justifiedGallery.css}">`)
// $.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () {
// btf.initJustifiedGallery($justifiedGallery)
// })
// detectJgJsLoad = true
// }
// }
let detectJgJsLoad = false
const runJustifiedGallery = function (ele) {
const $justifiedGallery = $(ele)
const $imgList = $justifiedGallery.find('img')
$imgList.unwrap()
if ($imgList.length) {
$imgList.each(function (i, o) {
if ($(o).attr('data-lazy-src')) $(o).attr('src', $(o).attr('data-lazy-src'))
$(o).wrap('<div></div>')
})
}
if (detectJgJsLoad) btf.initJustifiedGallery($justifiedGallery)
else {
$('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.justifiedGallery.css}">`)
$.getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`, function () {
btf.initJustifiedGallery($justifiedGallery)
})
detectJgJsLoad = true
}
}
/**
* fancybox和 mediumZoom
*/
* fancybox和 mediumZoom
*/
const addFancybox = function (ele) {
const runFancybox = (ele) => {
ele.each(function (i, o) {
@ -308,26 +308,26 @@ document.addEventListener('DOMContentLoaded', function () {
const addMediumZoom = () => {
const zoom = mediumZoom(document.querySelectorAll('#article-container :not(a)>img'))
zoom.on('open', e => {
const photoBg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#121212' : '#fff'
zoom.update({
background: photoBg
})
const photoBg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#121212' : '#fff'
zoom.update({
background: photoBg
})
})
}
}
const jqLoadAndRun = () => {
const $fancyboxEle = GLOBAL_CONFIG.lightbox === 'fancybox'
? document.querySelectorAll('#article-container :not(a):not(.gallery-group) > img, #article-container > img,.bber-content-img > img')
: []
? document.querySelectorAll('#article-container :not(a):not(.gallery-group):not(.site-card-avatar) > img, #article-container > img,.bber-content-img > img')
: []
const fbLengthNoZero = $fancyboxEle.length > 0
const $jgEle = document.querySelectorAll('#article-container .justified-gallery')
const jgLengthNoZero = $jgEle.length > 0
if (jgLengthNoZero || fbLengthNoZero) {
btf.isJqueryLoad(() => {
jgLengthNoZero && runJustifiedGallery($jgEle)
fbLengthNoZero && addFancybox($fancyboxEle)
})
btf.isJqueryLoad(() => {
jgLengthNoZero && runJustifiedGallery($jgEle)
fbLengthNoZero && addFancybox($fancyboxEle)
})
}
}
@ -338,13 +338,13 @@ document.addEventListener('DOMContentLoaded', function () {
const $rightside = document.getElementById('rightside')
const innerHeight = window.innerHeight + 0
// console.log("滚动处理运行");
// 當滾動條小于 0 的時候
if (document.body.scrollHeight <= innerHeight) {
$rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
return
$rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
return
}
let initTop = 0
let isChatShow = true
const $header = document.getElementById('page-header')
@ -353,48 +353,48 @@ document.addEventListener('DOMContentLoaded', function () {
const isChatBtnHide = typeof chatBtnHide === 'function'
const isChatBtnShow = typeof chatBtnShow === 'function'
window.addEventListener('scroll', btf.throttle(function (e) {
const currentTop = window.scrollY || document.documentElement.scrollTop
const isDown = scrollDirection(currentTop)
if (currentTop > 0) {
if (isDown) {
if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
if (isChatBtnShow && isChatShow === true) {
chatBtnHide()
isChatShow = false
}
const currentTop = window.scrollY || document.documentElement.scrollTop
const isDown = scrollDirection(currentTop)
if (currentTop > 0) {
if (isDown) {
if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
if (isChatBtnShow && isChatShow === true) {
chatBtnHide()
isChatShow = false
}
} else {
if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
if (isChatBtnHide && isChatShow === false) {
chatBtnShow()
isChatShow = true
}
}
$header.classList.add('nav-fixed')
if($cookies_window!=null && $cookies_window!=''){
$cookies_window.classList.add('cw-hide')
}
if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
$rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
}
} else {
if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
if (isChatBtnHide && isChatShow === false) {
chatBtnShow()
isChatShow = true
}
if (currentTop === 0) {
$header.classList.remove('nav-fixed', 'nav-visible')
}
$rightside.style.cssText = "opacity: ''; transform: ''"
}
$header.classList.add('nav-fixed')
if($cookies_window!=null && $cookies_window!=''){
$cookies_window.classList.add('cw-hide')
}
if (window.getComputedStyle($rightside).getPropertyValue('opacity') === '0') {
$rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
if (document.body.scrollHeight <= innerHeight) {
$rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
}
} else {
if (currentTop === 0) {
$header.classList.remove('nav-fixed', 'nav-visible')
}
$rightside.style.cssText = "opacity: ''; transform: ''"
}
if (document.body.scrollHeight <= innerHeight) {
$rightside.style.cssText = 'opacity: 1; transform: translateX(-38px)'
}
}, 200))
// find the scroll direction
function scrollDirection (currentTop) {
const result = currentTop > initTop // true is down & false is up
initTop = currentTop
return result
const result = currentTop > initTop // true is down & false is up
initTop = currentTop
return result
}
}
@ -867,7 +867,7 @@ document.addEventListener('DOMContentLoaded', function () {
})
clickFnOfSubMenu()
GLOBAL_CONFIG.copyright !== undefined && addCopyright()
}
@ -891,7 +891,7 @@ document.addEventListener('DOMContentLoaded', function () {
sidebarFn()
GLOBAL_CONFIG.isHome && scrollDownInIndex()
// addHighlightTool()
// GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption()
//GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption()
scrollFn()
addTableWrap()
clickFnOfTagHide()

View File

@ -4,16 +4,16 @@ var btf = {
// 修改时间显示"最近"
diffDate: function (d, more = false) {
const dateNow = new Date();
const datePost = new Date(d);
const dateDiff = dateNow.getTime() - datePost.getTime();
const minute = 1000 * 60;
const hour = minute * 60;
const day = hour * 24;
const month = day * 30;
const dateNow = new Date();
const datePost = new Date(d);
const dateDiff = dateNow.getTime() - datePost.getTime();
const minute = 1000 * 60;
const hour = minute * 60;
const day = hour * 24;
const month = day * 30;
let result;
if (more) {
let result;
if (more) {
const monthCount = dateDiff / month;
const dayCount = dateDiff / day;
const hourCount = dateDiff / hour;
@ -30,49 +30,108 @@ var btf = {
} else {
result = GLOBAL_CONFIG.date_suffix.just;
}
} else {
result = parseInt(dateDiff / day);
} else {
result = parseInt(dateDiff / day);
}
return result;
},
// loadLightbox: ele => {
// const service = GLOBAL_CONFIG.lightbox;
// if (service === "mediumZoom") {
// const zoom = mediumZoom(ele);
// zoom.on("open", e => {
// const photoBg = document.documentElement.getAttribute("data-theme") === "dark" ? "#121212" : "#fff";
// zoom.update({
// background: photoBg,
// });
// });
// }
// if (service === "fancybox") {
// ele.forEach(i => {
// if (i.parentNode.tagName !== "A") {
// const dataSrc = i.dataset.lazySrc || i.src;
// const dataCaption = i.title || i.alt || "";
// btf.wrap(i, "a", {
// href: dataSrc,
// "data-fancybox": "gallery",
// "data-caption": dataCaption,
// "data-thumb": dataSrc,
// });
// }
// });
// if (!window.fancyboxRun) {
// Fancybox.bind("[data-fancybox]", {
// Hash: false,
// Thumbs: {
// autoStart: false,
// },
// });
// window.fancyboxRun = true;
// }
// }
// },
loadLightbox: ele => {
const service = GLOBAL_CONFIG.lightbox;
if (service === "mediumZoom") {
const zoom = mediumZoom(ele);
zoom.on("open", e => {
const photoBg = document.documentElement.getAttribute("data-theme") === "dark" ? "#121212" : "#fff";
zoom.update({
background: photoBg,
});
});
}
if (service === "fancybox") {
ele.forEach(i => {
if (i.parentNode.tagName !== "A") {
const dataSrc = i.dataset.lazySrc || i.src;
const dataCaption = i.title || i.alt || "";
btf.wrap(i, "a", {
href: dataSrc,
"data-fancybox": "gallery",
"data-caption": dataCaption,
"data-thumb": dataSrc,
});
const jqLoadAndRun = () => {
const $fancyboxEle = GLOBAL_CONFIG.lightbox === 'fancybox'
? ele
: []
const fbLengthNoZero = $fancyboxEle.length > 0
if (fbLengthNoZero) {
btf.isJqueryLoad(() => {
fbLengthNoZero && addFancybox($fancyboxEle)
})
}
});
if (!window.fancyboxRun) {
Fancybox.bind("[data-fancybox]", {
Hash: false,
Thumbs: {
autoStart: false,
},
});
window.fancyboxRun = true;
}
}
/**
* fancybox
*/
const addFancybox = function (ele) {
const runFancybox = (ele) => {
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>`)
}
})
$().fancybox({
selector: '[data-fancybox]',
loop: true,
transitionEffect: 'slide',
protect: true,
buttons: ['slideShow', 'fullScreen', 'thumbs', 'close'],
hash: false
})
}
if (typeof $.fancybox === 'undefined') {
$('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.source.fancybox.css}">`)
$.getScript(`${GLOBAL_CONFIG.source.fancybox.js}`, function () {
runFancybox($(ele))
})
} else {
runFancybox($(ele))
}
}
jqLoadAndRun()
},
debounce: function (func, wait, immediate) {
let timeout
@ -217,7 +276,7 @@ var btf = {
}
},
scrollToDest: (e,t)=>{
if (e < 0 || t < 0)
return;
@ -230,19 +289,19 @@ var btf = {
});
let o = null;
t = t || 500,
window.requestAnimationFrame((function i(s) {
if (o = o || s,
n < e) {
const r = s - o;
window.scrollTo(0, (e - n) * r / t + n),
r < t ? window.requestAnimationFrame(i) : window.scrollTo(0, e)
} else {
const r = s - o;
window.scrollTo(0, n - (n - e) * r / t),
r < t ? window.requestAnimationFrame(i) : window.scrollTo(0, e)
}
}
))
window.requestAnimationFrame((function i(s) {
if (o = o || s,
n < e) {
const r = s - o;
window.scrollTo(0, (e - n) * r / t + n),
r < t ? window.requestAnimationFrame(i) : window.scrollTo(0, e)
} else {
const r = s - o;
window.scrollTo(0, n - (n - e) * r / t),
r < t ? window.requestAnimationFrame(i) : window.scrollTo(0, e)
}
}
))
},
fadeIn: (ele, time) => {

View File

@ -174,6 +174,17 @@
allPlaylist: [[${theme.config.other.nav_music.all_playlist}]],
navMusicEnable:[[${theme.config.other.nav_musicEnable}]],
isMusic: [[${ htmlType == 'music'}]],
source: {
jQuery: 'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.6.0/jquery.min.js',
justifiedGallery: {
js: 'https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/justifiedGallery/3.8.1/js/jquery.justifiedGallery.min.js',
css: 'https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/justifiedGallery/3.8.1/css/justifiedGallery.min.css'
},
fancybox: {
js: 'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.js',
css: 'https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.css'
}
},
date_suffix: {
just: '刚刚',
min: '分钟前',

View File

@ -17,7 +17,7 @@
envId: [[${theme.config.comments.twikoos.envId}]],
region: '',
onCommentLoaded: function () {
//- btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.vemoji)'))
btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.vemoji)'))
$("input").focus(function () {
heo_intype = true;
});