Fancybox 5 - 纯 Markdown 图片语法测试

说明：本页所有图片均使用标准 Markdown 语法 ![](url) 插入，由 JS 自动包裹 data-fancybox 属性。

一、大尺寸图片（应触发灯箱）

1.1 Unsplash 山景（JPG 格式）

1.2 Unsplash 海景（JPG 格式）

1.3 Unsplash 城市夜景（JPG 格式）

1.4 Unsplash 抽象艺术（竖向 JPG）

1.5 Unsplash 自然风光（竖向 JPG）

二、中等尺寸图片（Banner 横幅 PNG）

以下 5 张横幅图片应该可以左右切换：

三、WebP 格式图片

3.1 WebP 图片 1

3.2 WebP 图片 2

3.3 WebP 图片 3

3.4 WebP 图片 4

3.5 WebP 图片 5

3.6 WebP 图片 6

3.7 WebP 图片 7

四、PNG 格式图片

4.1 PNG 图片 1

4.2 设备照片（JPG）

4.3 装备照片（JPG）

五、上传的图片（uploads 目录）

5.1 上传的 PNG

5.2 上传的 JPG

5.3 上传的另一张 PNG

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

以下图标尺寸小于 80px，不应该弹出灯箱：

七、混合测试（大小图片混排）

7.1 大图 + 小图组合

下面这行包含一张大图和一个小图标：

预期结果：点击夜景大图 → 弹出灯箱 ✅ | 点击小图标 → 不触发 ❌

7.2 多格式混合

预期结果：三张图都可以弹出灯箱，且可以互相切换 ✅

八、功能验证清单

请逐项测试并勾选：

✅ 基础功能

• 第一节：点击任意 Unsplash 大图 → 弹出 Fancybox 灯箱
• 第二节：点击 Banner 图片 → 弹出灯箱 + 可左右切换 5 张
• 第三节：WebP 格式图片正常显示和切换（7张）
• 第四节：PNG/JPG 混合格式正常工作
• 第五节：uploads 目录的图片正常显示

✅ 过滤功能

• 第六节：小图标（头像/Logo/樱花/二维码）→ 点击不触发灯箱
• 第七节：大图+小图混排时，只有大图触发灯箱

✅ 工具栏功能（灯箱打开后）

• 🔍 缩放按钮：点击或鼠标滚轮可缩放图片
• ⛶ 全屏按钮：进入全屏模式
• ⬇️ 下载按钮：保存原图到本地
• ◀▶ 左右箭头：多图时可切换
• ✕ 关闭按钮：关闭灯箱

✅ 键盘导航

• ← 左箭头：上一张图片
• → 右箭头：下一张图片
• ESC 键：关闭灯箱

✅ 样式检查

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

✅ 控制台日志（F12 打开开发者工具）

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

📊 测试结果记录表

💡 技术说明

本页使用的语法

1![描述](/images/xxx.webp)

这是纯标准 Markdown 图片语法，无需任何 HTML 或特殊属性。

自动处理流程

1. 页面加载后，JS 扫描 .post-content 区域
2. 找到所有 <img> 标签（排除 <80px 和 data-no-lightbox）
3. 自动用 <a data-fancybox="post-gallery"> 包裹
4. 绑定 Fancybox 事件处理器
5. 用户点击图片 → 触发 Fancybox 灯箱

与手写 HTML 的区别

📝 文档信息

• 创建时间：2026-05-20 15:30
• 测试环境：Hugo 本地开发服务器
• 图片来源：static/images/ 目录
• Fancybox 版本：5.x