Fancybox 5 图片灯箱功能测试

点击下方任意图片，应该弹出 Fancybox 5 灯箱效果（支持缩放、全屏、下载等）。

一、基本点击放大

二、多图切换（左右箭头 + 键盘 + 缩略图）

以下 5 张图片应支持多图浏览模式：点击任意一张后，可用左右箭头或键盘方向键切换，底部显示缩略图导航。

三、不同格式图片（JPG / PNG / WebP）

JPG 格式

PNG 格式

WebP 格式

四、城市夜景

五、竖向构图图片

六、小尺寸图标（不应触发灯箱）

以下为小尺寸图标头像，宽度小于 80px 的图片不应该触发灯箱（会被自动过滤）：

七、Fancybox 高级功能测试

7.1 带详细说明的图片

7.2 禁用灯箱的图片（data-no-lightbox）

💡 提示：这张图片添加了 data-no-lightbox 属性，点击后不会弹出灯箱。

八、功能验证清单

访问此页面后，请逐项验证以下功能：

✅ 基础功能

• 点击任意大图 → 弹出 Fancybox 灯箱
• 灯箱背景：半透明黑色遮罩
• 关闭方式：点击关闭按钮 / 按 ESC 键 / 点击背景
• 图片显示完整，无拉伸变形

✅ 多图浏览

• Banner 组（5张）：点击任意一张后可左右切换
• 格式组（3张）：JPG/PNG/WebP 可切换
• 竖向组（2张）：竖向构图图片可切换
• 左右箭头按钮正常显示和工作
• 键盘 ← → 方向键可用

✅ 工具栏功能

• 缩放按钮：点击后图片放大（鼠标滚轮也可缩放）
• 全屏按钮：进入全屏模式
• 下载按钮：下载原图到本地
• 上一张/下一张：多图时显示
• 关闭按钮：右上角 X 按钮

✅ 过滤功能

• 小尺寸图标（<80px）→ 不触发灯箱 ✅
• data-no-lightbox 图片 → 不触发灯箱 ✅
• 其他所有图片 → 正常触发灯箱 ✅

✅ 样式和体验

• 图片悬停时显示 cursor: zoom-in
• 悬停时有轻微放大效果（scale 1.02）
• 蓝色阴影悬停效果
• 暗色模式下样式自适应
• 平滑过渡动画（300ms）

✅ 控制台日志

打开浏览器开发者工具（F12），应看到：

1[Lightbox] 检测到 Fancybox 5，已禁用原生 Lightbox
2[Fancybox] 文章图片灯箱初始化完成 ✓ (X 张)

📊 测试结果记录

📝 文档信息

• 创建时间：2026-05-20
• 最后更新：2026-05-20
• 测试环境：Hugo 本地开发服务器
• Fancybox 版本：5.x（CDN 加载）