评论图片预览

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

View File

@ -4,16 +4,16 @@ var btf = {
// 修改时间显示"最近" // 修改时间显示"最近"
diffDate: function (d, more = false) { diffDate: function (d, more = false) {
const dateNow = new Date(); const dateNow = new Date();
const datePost = new Date(d); const datePost = new Date(d);
const dateDiff = dateNow.getTime() - datePost.getTime(); const dateDiff = dateNow.getTime() - datePost.getTime();
const minute = 1000 * 60; const minute = 1000 * 60;
const hour = minute * 60; const hour = minute * 60;
const day = hour * 24; const day = hour * 24;
const month = day * 30; const month = day * 30;
let result; let result;
if (more) { if (more) {
const monthCount = dateDiff / month; const monthCount = dateDiff / month;
const dayCount = dateDiff / day; const dayCount = dateDiff / day;
const hourCount = dateDiff / hour; const hourCount = dateDiff / hour;
@ -30,49 +30,108 @@ var btf = {
} else { } else {
result = GLOBAL_CONFIG.date_suffix.just; result = GLOBAL_CONFIG.date_suffix.just;
} }
} else { } else {
result = parseInt(dateDiff / day); result = parseInt(dateDiff / day);
} }
return result; 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 => { loadLightbox: ele => {
const service = GLOBAL_CONFIG.lightbox;
const jqLoadAndRun = () => {
if (service === "mediumZoom") { const $fancyboxEle = GLOBAL_CONFIG.lightbox === 'fancybox'
const zoom = mediumZoom(ele); ? ele
zoom.on("open", e => { : []
const photoBg = document.documentElement.getAttribute("data-theme") === "dark" ? "#121212" : "#fff"; const fbLengthNoZero = $fancyboxEle.length > 0
zoom.update({
background: photoBg, if (fbLengthNoZero) {
}); btf.isJqueryLoad(() => {
}); fbLengthNoZero && addFancybox($fancyboxEle)
} })
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;
}
} }
/**
* 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) { debounce: function (func, wait, immediate) {
let timeout let timeout
@ -217,7 +276,7 @@ var btf = {
} }
}, },
scrollToDest: (e,t)=>{ scrollToDest: (e,t)=>{
if (e < 0 || t < 0) if (e < 0 || t < 0)
return; return;
@ -230,19 +289,19 @@ var btf = {
}); });
let o = null; let o = null;
t = t || 500, t = t || 500,
window.requestAnimationFrame((function i(s) { window.requestAnimationFrame((function i(s) {
if (o = o || s, if (o = o || s,
n < e) { n < e) {
const r = s - o; const r = s - o;
window.scrollTo(0, (e - n) * r / t + n), window.scrollTo(0, (e - n) * r / t + n),
r < t ? window.requestAnimationFrame(i) : window.scrollTo(0, e) r < t ? window.requestAnimationFrame(i) : window.scrollTo(0, e)
} else { } else {
const r = s - o; const r = s - o;
window.scrollTo(0, n - (n - e) * r / t), window.scrollTo(0, n - (n - e) * r / t),
r < t ? window.requestAnimationFrame(i) : window.scrollTo(0, e) r < t ? window.requestAnimationFrame(i) : window.scrollTo(0, e)
} }
} }
)) ))
}, },
fadeIn: (ele, time) => { fadeIn: (ele, time) => {

View File

@ -174,6 +174,17 @@
allPlaylist: [[${theme.config.other.nav_music.all_playlist}]], allPlaylist: [[${theme.config.other.nav_music.all_playlist}]],
navMusicEnable:[[${theme.config.other.nav_musicEnable}]], navMusicEnable:[[${theme.config.other.nav_musicEnable}]],
isMusic: [[${ htmlType == 'music'}]], 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: { date_suffix: {
just: '刚刚', just: '刚刚',
min: '分钟前', min: '分钟前',

View File

@ -17,7 +17,7 @@
envId: [[${theme.config.comments.twikoos.envId}]], envId: [[${theme.config.comments.twikoos.envId}]],
region: '', region: '',
onCommentLoaded: function () { 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 () { $("input").focus(function () {
heo_intype = true; heo_intype = true;
}); });