Fancybox图片灯箱效果实现
Fancybox是一款基于jquery开发的类Lightbox插件，同时也是一款很绚丽的 jquery 弹出层展示插件，支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽。
该lightbox除了能够展示图片之外，还可以展示iframed内容， 通过css自定义外观。
Fancybox 可以节省您的时间并帮助您轻松创建包含图像、iframe、视频或任何类型的 HTML 内容的漂亮、现代的叠加窗口。
安装
这里仅给出CDN快速引用安装方式，npm安装方式请自行查阅官方文档。
安装文档：https://fancyapps.com/docs/ui/installation
你可以前往官方下载到本地引入，也可以使用其他CDN库或直接使用下方泽以创建的CDN：
在网页的头部引入css：
<link rel="stylesheet" href="https://cdn.zeyiwl.cn/fancyui4.0/fancybox.css" />在网页的底部引入js：
<script src="https://cdn.zeyiwl.cn/fancyui4.0/fancybox.umd.js"></script>如果你使用的是原生 ES 模块，还有一个 ES 模块兼容的构建：
<script type="module">
import { Fancybox } from "https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.esm.js";
</script>示例
Fancybox 的原理是使用链接将其链接到更大的缩略图图像。
（data-src或 href）属性用于指定较大版本图像的路径。
附加属性：
data-srcset- 为元素设置srcset属性；imagedata-sizes- 为元素设置sizes属性。image
单图实现：
<a data-fancybox="single" data-src="https://pic.zeyiwl.cn/yunimg/20220123125125.jpg">
<img src="https://pic.zeyiwl.cn/yunimg/20220123125125.jpg" width="200" />
</a>图片集合：
<a
data-fancybox="gallery"
data-src="https://lipsum.app/id/2/1024x768"
data-caption="Optional caption,<br />that can contain <em>HTML</em> code"
>
<img src="https://lipsum.app/id/2/200x150" />
</a>
<a data-fancybox="gallery" data-src="https://lipsum.app/id/3/1024x768">
<img src="https://lipsum.app/id/3/200x150" />
</a>
<a data-fancybox="gallery" data-src="https://lipsum.app/id/4/1024x768">
<img src="https://lipsum.app/id/4/200x150" />
</a>一张预览：
<a data-fancybox="gallery-a" href="https://lipsum.app/id/60/1800x1200">
<img class="rounded" src="https://lipsum.app/id/60/300x200" />
</a>
<div style="display:none">
<a data-fancybox="gallery-a" href="https://lipsum.app/id/61/1800x1200">
<img class="rounded" src="https://lipsum.app/id/61/120x80" />
</a>
<a data-fancybox="gallery-a" href="https://lipsum.app/id/62/1800x1200">
<img class="rounded" src="https://lipsum.app/id/62/120x80" />
</a>
<a data-fancybox="gallery-a" href="https://lipsum.app/id/63/1800x1200">
<img class="rounded" src="https://lipsum.app/id/63/120x80" />
</a>
</div>JS使用
最简单的使用，以所有的img属性作为选项设置特定于图像的自定义选项，处理预加载，光标样式，单击，双击和滚轮事件，放大/缩小动画。
<script type="text/javascript">
Fancybox.bind("[data-fancybox]", {
Image: {
Panzoom: {
zoomFriction: 0.7,
maxScale: function() {
return 5;
},
},
},
});
</script>其他可选参数
canZoomInClass {String}
指示内容可以放大的幻灯片元素的类名。默认值：can-zoom_in
canZoomOutClass {String}
表示可以缩小内容的幻灯片元素的类名。默认：can-zoom_out
zoom {Boolean}
在启动或关闭fancybox 时从缩略图中缩放动画。默认：true
zoomOpacity {String|Boolean}
缩放时动画不透明度。默认：auto
zoomFriction {Number}
缩放动画摩擦。默认：0.8
ignoreCoveredThumbnail {Boolean}
如果缩略图仅部分可见，则禁用缩放动画。
click {String|null}
用户单击图像时要执行的操作。默认值：'toggleZoom'
可能的值：toggleZoom、、next或 closenull`。
doubleClick {String|null}
在图像上检测到双击事件时要执行的操作。默认值：null.
可能的值：toggleZoom或 null。
wheel {String|null}
在图像上检测到双击事件时要执行的操作。默认值：zoom
可能的值：zoom、slide或。close`null`
fit {String}
如何调整图像大小以适合其容器。默认值：contain
可能的值 contain：contain-w或 cover。
支持
Fancybox包含的插件提供了额外的媒体类型支持：图像，用于内嵌内容、iframe、视频（HTML5、Youtube 和 Vimeo）、Google 地图和 Ajax 的 HTML 。
如果你想链接到PDF文件，有两张方式：
- 只需链接到 PDF 文件（可选，使用
data-type="pdf"属性）
<a data-fancybox data-type="pdf" href="YOUR_PDF_FILE.pdf">Click me</a>- 上面的方式已经适用与现代化浏览器，如果是过时浏览器您可以引入使用PDF.js。
<a
data-fancybox
data-type="pdf"
href="/pdfjs/web/viewer.html?file=YOUR_PDF_FILE.pdf"
>Click me</a
>相册的全面使用说明：Image
Fancybox的灵感例子：展示柜
更多使用方式请查看：官方文档