Fancyapps实现图片灯箱


Tags: #前端
Created:
Updated:

参考资料

  1. fancybox:老版本仓库,截止V3.5.7
  2. ui:新版本仓库
  3. fancyapps:fancyapps官网,提供提供包括 Fancybox 在内的一系列 UI 组件
  4. 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
});

其他的自定义选项可以参考官网,基本的使用已满足日常的需要