图片灯箱 Lightbox：点击即放大看图

功能简介

图片灯箱（Lightbox）让访客点击文章正文中的图片时，图片以全屏遮罩层放大的方式呈现，再次点击或按关闭即可退出，提升看图体验。

如何开启

进入 WordPress 后台 → 「Vela主题设置」页面的「功能开关」分区 → 找到「图片灯箱 Lightbox」→ 勾选启用并保存。

效果与适用场景

• 仅作用于「文章正文」内的图片。
• 遮罩层支持点击空白或关闭按钮退出。
• 教程、图集、产品展示类内容非常实用。

备注

不替换主题原有图片逻辑，仅在点击时叠加预览层；关闭开关后恢复默认点击行为。

实现代码

以下为「图片灯箱 Lightbox」的核心实现（取自 features.js 与 features.css）。

/* ---------- 图片灯箱（features.js 片段） ---------- */
if (C.lightbox && isSingle()) {
    var croot = contentRoot();
    if (croot) {
        $all('img', croot).forEach(function (img) {
            img.style.cursor = 'zoom-in';
            img.addEventListener('click', function (e) {
                e.preventDefault();
                var ov = doc.createElement('div');
                ov.className = 'vela-lightbox';
                ov.innerHTML = '<img src="' + img.src + '" alt="' + (img.alt || '') + '">';
                doc.body.appendChild(ov);
                ov.addEventListener('click', function () { ov.remove(); });
            });
        });
    }
}

/* 图片灯箱（features.css 片段） */
.vela-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .82);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    cursor: zoom-out;
}
.vela-lightbox img {
    max-width: 92vw;
    max-height: 92vh;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .5);
}

点击正文图片时动态创建遮罩层并插入大图，再次点击遮罩即 remove() 移除。