灯箱效果

其实在移动端访问的时候，宽视野模式（Wide View)上显示的照片已经足够大了，考虑到加灯箱，是因为有些照片本身是横向拍摄，比例限制，展示比较小，个人觉得加个灯箱可能更便于自己查看，同时保留查看拍摄设备信息和拍摄地点。

在灯箱状态下，怎么退出灯箱，我的思路是再次Click任何地方都可以，有需要的童鞋可以参考一下。

/**
* 自定义灯箱脚本 – 专为 photo.ouxiaopi.com 设计
* 功能：点击图片放大 + 显示位置与设备 + 点击/ESC关闭
* 特性：轻量、本地化、响应式、支持动态内容
*/

(function() { // 使用 IIFE 避免全局变量污染
let lightbox, lightboxImg, closeBtn, locationInfo, equipmentInfo;

// 初始化函数：获取所有需要的 DOM 元素
function initLightboxElements() {
lightbox = document.getElementById(‘custom-lightbox’);
lightboxImg = document.getElementById(‘lightbox-image’);
// 注意：这里不再强制要求 closeBtn 存在
locationInfo = document.getElementById(‘lightbox-location’);
equipmentInfo = document.getElementById(‘lightbox-equipment’);

if (!lightbox || !lightboxImg) {
console.warn(‘Custom Lightbox: Required elements not found.’);
return false;
}
return true;
}

// 绑定事件的函数
function bindLightboxEvents(scope = document) {
// 如果基础元素未初始化，则尝试初始化
if (!lightbox && !initLightboxElements()) {
return;
}

const triggers = scope.querySelectorAll(‘.lightbox-trigger:not(.lightbox-initialized)’); // 只选择未初始化的
if (!triggers.length) {
// console.log(‘Custom Lightbox: No new triggers found to bind.’);
return;
}

// console.log(`Custom Lightbox: Binding events to ${triggers.length} new triggers.`);

triggers.forEach(trigger => {
// 防止重复绑定
if (trigger.classList.contains(‘lightbox-initialized’)) {
return;
}

trigger.addEventListener(‘click’, function (e) {
e.preventDefault();

const imgSrc = this.getAttribute(‘data-image’);
const location = this.getAttribute(‘data-location’) || ”;
const equipment = this.getAttribute(‘data-equipment’) || ”;

if (!imgSrc) {
console.warn(‘Custom Lightbox: No image source found.’);
return;
}

lightboxImg.src = imgSrc;
lightboxImg.alt = this.closest(‘article’)?.querySelector(‘.post-content .title’)?.textContent || ‘Photo’;

locationInfo.textContent = location;
equipmentInfo.textContent = equipment;

// 显示灯箱并添加动画类
lightbox.style.display = ‘flex’;
lightbox.offsetHeight;
lightbox.classList.add(‘lightbox-open’);
});
// 标记为已初始化，防止重复绑定
trigger.classList.add(‘lightbox-initialized’);
});
}
function closeLightbox() {
if (!lightbox) return;
lightbox.classList.remove(‘lightbox-open’);
setTimeout(() => {
lightbox.style.display = ‘none’;
}, 300); // 与 CSS 中的 transition 时间保持一致
}
document.addEventListener(‘DOMContentLoaded’, function () {
if (!initLightboxElements()) return;

bindLightboxEvents();

if (closeBtn) {
closeBtn.addEventListener(‘click’, function(e) {
e.stopPropagation(); // 阻止冒泡，防止触发背景点击
closeLightbox();
});
}
lightbox.addEventListener(‘click’, function(e) {
// 无论点击的是图片、文字还是背景，都关闭灯箱
closeLightbox();
});
// 按 ESC 键关闭
document.addEventListener(‘keydown’, function(e) {
if (e.key === ‘Escape’ && lightbox && lightbox.style.display === ‘flex’) {
closeLightbox();
}
});
});
// 暴露一个全局函数，供 AJAX 加载后调用
window.ouxiaopiInitLightbox = bindLightboxEvents;

})();

BUG框架溢出

前几天在测试的时候发现，如果切换紧凑视野和宽视野之后，手机端上划，整体框架会左右晃荡，会溢出，于是修改了下样式。

/* 防止页面水平滚动 */
html, body {
overflow-x: hidden;
margin: 0;
padding: 0;
}

body {
font-family: Arial, sans-serif;
}

/* 确保容器不产生水平溢出 */
.container {
max-width: 1440px;
width: 100%;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
}

.column {
padding: .75rem;
box-sizing: border-box;
}
/* — 新增：使 .column 内容居中 — */
.column-centered {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}

/* — 新增结束 — */

视野切换按钮的优化

感觉以前的点击切换会比较生硬，交互感不强，就就改成滑块样式，本质还是点击，但只是加了个运动效果而已。但看起来舒服多啦，哈哈（自以为的）。

function add_view_toggle_script() {
?>
<script>
document.addEventListener(‘DOMContentLoaded’, function() {
const container = document.getElementById(‘viewToggle’);
const compactBtn = document.getElementById(‘compactViewBtn’);
const wideBtn = document.getElementById(‘wideViewBtn’);
const body = document.body;

if (!container || !compactBtn || !wideBtn) {
console.warn(‘View Toggle: Required elements not found.’);
return;
}

function setActiveButton(activeBtn, inactiveBtn) {
activeBtn.classList.add(‘active’);
inactiveBtn.classList.remove(‘active’);
}

function switchToCompactView() {
container.classList.remove(‘wide-active’);
setActiveButton(compactBtn, wideBtn);
body.classList.remove(‘wide-view’);
body.classList.add(‘compact-view’);
console.log(“切换到紧凑视野”);
}

function switchToWideView() {
container.classList.add(‘wide-active’);
setActiveButton(wideBtn, compactBtn);
body.classList.remove(‘compact-view’);
body.classList.add(‘wide-view’);
console.log(“切换到宽视野”);
}

if (body.classList.contains(‘wide-view’)) {
switchToWideView();
} else {
switchToCompactView();
}

compactBtn.addEventListener(‘click’, switchToCompactView);
wideBtn.addEventListener(‘click’, switchToWideView);
});

暂时就这样吧，还是有bug，因为用的是懒加载，随鼠标无限滚动，会加载出重复的图片，都改成按post id加载了，还是会出现，不知道什么问题，在大模型上问了，也没问出个结果，下次再弄吧。
不想动脑子了。
真懒。