Fancyapps实现图片灯箱
参考资料
- fancybox:老版本仓库,截止V3.5.7
- ui:新版本仓库
- fancyapps:fancyapps官网,提供提供包括 Fancybox 在内的一系列 UI 组件
- Showcase:官方示例写法,可以参考
版本差异
fancyBox
是一个 JavaScript 库,它以优雅的方式展示图片,视频和一些 html 内容。
仓库截至到V3.5.7的版本,后续的版本融合到fancyapps UI组件库中去了
要查看V5相关资料的话,最好就看官方,网上大多是V3
灯箱效果
要使用fancyBox
图片灯箱效果也非常简单
首先从CDN引入资源
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.min.css" />
为元素添加(声明)data-fancybox
属性。
<a href="image-a.jpeg" data-fancybox data-caption="Single image">
<img src="thumbnail-a.jpeg" />
</a>
使用Fancybox.bind()
方法给相应的元素绑定相应的处理程序
第一个参数:选择器,可以使用CSS选择器或者常规选择器(只要
querySelectorAll
方法支持的都行)第二个参数:
fancyBox
的选项,通常用于自定义,如果空着,那么所有配置使用fancyBox
的默认选项
Fancybox.bind("[data-fancybox]", {
// Your custom options
});
其他的自定义选项可以参考官网,基本的使用已满足日常的需要