| Server IP : 156.238.232.47 / Your IP : 216.73.216.150 Web Server : nginx/1.25.3 System : Linux C202504152095410 3.10.0-1160.119.1.el7.x86_64 #1 SMP Tue Jun 4 14:43:51 UTC 2024 x86_64 User : www ( 1000) PHP Version : 8.3.25 Disable Function : passthru,exec,system,putenv,chroot,chgrp,chown,shell_exec,popen,proc_open,pcntl_exec,ini_alter,ini_restore,dl,openlog,syslog,readlink,symlink,popepassthru,pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,imap_open,apache_setenv MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /www/data/wwwroot/2025_12_14_01/template/dafeult/ |
Upload File : |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<title>{pboot:sitetitle}</title>
<meta name="description" content="{pboot:sitedescription}" />
<meta name="keywords" content="{pboot:sitekeywords}" />
<link rel="stylesheet" href="/skin/detail.css" />
</head>
<body class="detail-page">
<main class="detail">
<div class="container">
<h1 class="detail__title">{content:title}</h1>
<section class="gallery" aria-label="图片预览">
<div class="gallery__main">
<ul class="slides">
{pboot:pics id={content:id} }
<li class="slide">
<img src="[pics:src]" alt="[pics:title]" />
</li>
{/pboot:pics}
</ul>
<!-- <button class="nav nav--prev" type="button" aria-label="上一张"></button>
<button class="nav nav--next" type="button" aria-label="下一张"></button> -->
</div>
<div class="gallery__thumbs">
<ul class="thumbs">
{pboot:pics id={content:id} }
<li class="thumb">
<img src="[pics:src]" alt="[pics:title]" />
</li>
{/pboot:pics}
</ul>
</div>
</section>
</div>
</main>
<div class="lightbox" hidden>
<div class="lightbox__inner">
<img class="lightbox__img" src="" alt="" />
<button class="lightbox__close" type="button" aria-label="关闭"></button>
<button class="lightbox__prev" type="button" aria-label="上一张"></button>
<button class="lightbox__next" type="button" aria-label="下一张"></button>
</div>
</div>
<script>
var slides = document.querySelectorAll('.slide');
var thumbs = document.querySelectorAll('.thumb');
var prevBtn = document.querySelector('.nav--prev');
var nextBtn = document.querySelector('.nav--next');
var current = 0;
function setActive(i) {
for (var s = 0; s < slides.length; s++) {
slides[s].classList.remove('is-active');
}
for (var t = 0; t < thumbs.length; t++) {
thumbs[t].classList.remove('is-active');
}
if (slides[i]) slides[i].classList.add('is-active');
if (thumbs[i]) thumbs[i].classList.add('is-active');
current = i;
}
function next() {
if (slides.length === 0) return;
var i = current + 1;
if (i >= slides.length) i = slides.length - 1;
setActive(i);
}
function prev() {
if (slides.length === 0) return;
var i = current - 1;
if (i < 0) i = 0;
setActive(i);
}
if (slides.length) setActive(0);
if (prevBtn) prevBtn.addEventListener('click', prev);
if (nextBtn) nextBtn.addEventListener('click', next);
for (var k = 0; k < thumbs.length; k++) {
(function (idx) {
var el = thumbs[idx];
el.addEventListener('click', function () { setActive(idx); });
})(k);
}
var startX = 0;
var endX = 0;
var main = document.querySelector('.gallery__main');
if (main) {
main.addEventListener('touchstart', function (e) { startX = e.changedTouches[0].clientX; }, { passive: true });
main.addEventListener('touchend', function (e) {
endX = e.changedTouches[0].clientX;
var dx = endX - startX;
if (dx > 40) prev();
if (dx < -40) next();
}, { passive: true });
}
var lightbox = document.querySelector('.lightbox');
var lightImg = document.querySelector('.lightbox__img');
var lbPrev = document.querySelector('.lightbox__prev');
var lbNext = document.querySelector('.lightbox__next');
var lbClose = document.querySelector('.lightbox__close');
function openLightbox() {
var img = slides[current] ? slides[current].querySelector('img') : null;
if (!img || !lightbox || !lightImg) return;
lightImg.src = img.src;
lightImg.alt = img.alt || '';
lightbox.hidden = false;
document.body.style.overflow = 'hidden';
}
function closeLightbox() {
if (!lightbox) return;
lightbox.hidden = true;
document.body.style.overflow = '';
}
function lbNextFn() { next(); openLightbox(); }
function lbPrevFn() { prev(); openLightbox(); }
if (lbNext) lbNext.addEventListener('click', lbNextFn);
if (lbPrev) lbPrev.addEventListener('click', lbPrevFn);
if (lbClose) lbClose.addEventListener('click', closeLightbox);
if (lightbox) lightbox.addEventListener('click', function (e) {
if (e.target === lightbox) closeLightbox();
});
var activeImg = function () {
var s = slides[current];
return s ? s.querySelector('img') : null;
};
if (main) {
main.addEventListener('click', function (e) {
var img = activeImg();
if (!img) return;
openLightbox();
});
}
var lbStartX = 0;
var lbEndX = 0;
if (lightbox) {
lightbox.addEventListener('touchstart', function (e) { lbStartX = e.changedTouches[0].clientX; }, { passive: true });
lightbox.addEventListener('touchend', function (e) {
lbEndX = e.changedTouches[0].clientX;
var dx = lbEndX - lbStartX;
if (dx > 40) lbPrevFn();
if (dx < -40) lbNextFn();
}, { passive: true });
}
</script>
</body>
</html>