实例 1：单张图片
点击缩略图即可放大显示，最基本的用法。
<a href="大图地址" data-fancybox data-caption="标题">
<img src="缩略图地址">
</a>
// 然后在 JS 中绑定：
Fancybox.bind("[data-fancybox]");
实例 2：图片画廊 (Gallery)
多张图片共享同一个 data-fancybox 值即可形成可翻页的画廊。
<a href="big-1.jpg" data-fancybox="gallery" data-caption="图1">...</a>
<a href="big-2.jpg" data-fancybox="gallery" data-caption="图2">...</a>
<a href="big-3.jpg" data-fancybox="gallery" data-caption="图3">...</a>
// 相同的 "gallery" 值 = 同一个相册
实例 3：内联 HTML 内容 (Inline)
将页面中隐藏的 HTML 块弹出来显示，适合做登录框、表单等。
<a href="#login-form" data-fancybox data-type="inline">打开表单</a>
<div id="login-form" style="display:none">
<form>...登录表单内容...</form>
</div>
用户登录
提示：点击遮罩或右上角关闭按钮即可关闭
关于 Fancybox
Fancybox 是一款功能强大的 JavaScript 灯箱库，支持图片、视频、iframe、HTML 内容等的优雅展示。 它是纯原生 JS 编写，无需任何依赖库（如 jQuery）。
- 支持触屏滑动、双指缩放
- 响应式设计，移动端友好
- 丰富的 API 与回调函数
- 多实例同时打开
实例 4：Iframe 嵌入外部网页
在 Fancybox 中打开任意网页，适合展示外部页面或文档。
<a href="https://example.com"
data-fancybox
data-type="iframe"
data-options='{"iframe":{"preload":false}}'>
打开网页
</a>
实例 5：YouTube 视频嵌入
直接把 YouTube 链接作为 href，Fancybox 会自动嵌入播放器。
<a href="https://www.youtube.com/watch?v=VIDEO_ID"
data-fancybox>
<img src="视频封面.jpg">
</a>
实例 6：自定义动画效果
演示不同的进入/退出动画与切换效果。
Fancybox.bind("[data-fancybox-animate]", {
showClass: "f-fadeIn", // 进入动画
hideClass: "f-fadeOut", // 退出动画
Images: { zoom: false }, // 关闭图片缩放
Carousel: { transition: "slide" } // 切换动画
});
实例 7：带缩略图导航的画廊
使用 Thumbs 插件显示底部缩略图条，方便快速跳转。
Fancybox.bind("[data-fancybox='thumbs-gallery']", {
Thumbs: {
type: "classic" // 或 "modern"
}
});
// 同时需要在 a 标签上指定 data-thumb 为缩略图地址
实例 8：编程式 API 调用
通过 new Fancybox(...) 直接打开灯箱，无需预先定义 HTML 元素。
new Fancybox(
[{ src: "image.jpg", caption: "标题" }],
{ Thumbs: { autoStart: true } }
);
// 其他常用 API：
Fancybox.close(); // 关闭当前实例
Fancybox.next(); // 下一张
Fancybox.prev(); // 上一张
Fancybox.getInstance(); // 获取当前实例
实例 9：常见配置项演示
关闭工具栏、隐藏关闭按钮、循环播放等常用选项。
// 循环画廊 + 隐藏工具栏
Fancybox.bind("[data-fancybox='config-gallery']", {
Carousel: { infinite: true }, // 循环播放
Toolbar: { display: { left: [], right: ["close"] } }, // 简化工具栏
Images: { zoom: true } // 启用图片缩放
});
实例 10：HTML 内容弹窗
直接用 HTML 字符串作为弹窗内容，无需在页面预定义元素。
new Fancybox([{
src: "<div style='padding:30px'><h2>Hello</h2><p>自定义 HTML</p></div>",
type: "html"
}]);