Fancybox

介绍

Fancybox是最终的JavaScript lightbox替代品，为多媒体显示的高级用户体验设定了标准。支持图像、视频、地图、内联内容、iframe和任何其他HTML内容。

现在Fancybox已经更新到了第五代。此外，Fancybox很容易集成到任何JavaScript框架中，请参阅React，Vue和Angular的示例。

主要特性：

用TypeScript编写，没有外部依赖
高度可定制的大量配置选项和CSS变量
触摸和移动的优化与滑动，拖动和移动设备上的缩放手势
同时打开多个（活动）实例
两种类型的缩略图 - 经典和新外观
紧凑模式，具有类似移动设备的用户体验
多种多样的动画控制
支持<picture>新元素
可以处理包含无限项目的图库
...

官方文档

安装

使用 NPM 包管理器安装

shell

# 使用 NPM 安装
npm install --save @fancyapps/ui

# 或使用 Yarn
yarn add @fancyapps/ui

安装成功后，就可以在 JS 中引入：

import { Fancybox } from "@fancyapps/ui";
import "@fancyapps/ui/dist/fancybox/fancybox.css";

通过 CDN 引用

使用 jsdelivr 地址：

html

<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css"/>

使用本站地址：

html

<script src="https://static.qi1.website/js/fancybox.js"></script>
<link rel="stylesheet" href="https://static.qi1.website/css/fancybox.css"/>

本教程的资源文件更新于2024年7月8日，Fancybox版本为5.0。

最新代码也可以在 Github 上下载，可在dist文件夹中找到编译后的代码。

使用 - 为要展示的元素添加必要的属性

使用方法是为要展示的元素添加 data-fancybox 属性，并在 href 或 data-src 属性中指定要显示的内容源。

可选：使用 data-caption 为要展示的元素添加标题。

html

<a href="https://static.qi1.website/img/example1.png" data-fancybox data-caption="美丽的风景">
    <img src="https://static.qi1.website/img/example1.png" alt="example1"/>
</a>

Fancybox 支持在一组画廊里展示多张幻灯片。为这些元素添加具有相同属性值的 data-fancybox 属性即可，比如 data-fancybox="gallery"

html

<a href="https://static.qi1.website/img/example1.png" data-fancybox="gallery" data-caption="美丽的风景 #1">
  <img src="https://static.qi1.website/img/example1.png" alt="Example1" />
</a>

<a href="https://static.qi1.website/img/example2.png" data-fancybox="gallery" data-caption="美丽的风景 #2">
  <img src="https://static.qi1.website/img/example2.png" alt="Example2" />
</a>

使用 - 添加事件监听

声明完元素后，在最后调用 Fancybox.bind() 方法，这一步的作用是为每个元素的 click 事件加一个处理程序。

当然，要先引入 Fancybox 的 JavaScript 文件，然后在必要的位置添加如下代码：

Fancybox.bind("[data-fancybox]", {
  // Your custom options
});

该函数的意义是为每个具有 data-fancybox 的元素添加到幻灯片列表中。

Fancybox 将在用户点击任何与之前使用的选择器 [data-fancybox] 匹配的元素后启动。

虽然 Fancybox.bind() 方法接受 JS querySelectorAll 方法支持的任何值，例如 #gallery a，但使用 [data-fancybox] 更方便，因为该属性也用于分组。

使用 - 为幻灯片分组

比如，一篇文章的 HTML 结构可以是这样：

html

<div class="Title">
    <img src="https://static.qi1.website/img/fancybox-cover.png" width="200" height="50" alt="Example1" />
</div>
<div class="Content">
    <p>这篇文章介绍了如何使用 Fancybox 库来为页面中的多媒体元素添加画廊/幻灯片展示。</p>
    <p><img src="https://static.qi1.website/img/fancybox-cover.png" alt="Fancybox封面" /></p>
    <p>首先，我们需要引入 JS 文件，它的地址是 https://static.qi1.website/js/fancybox.js 。</p>
    <p>光有 JS 是不够的，还需要引入 CSS：https://static.qi1.website/css/fancybox.css</p>
    <p>然后，我们为要展示的图片添加必要的元素，例如 &lt;img data-fancybox src="https://static.qi1.website/img/example1.png" data-src="https://static.qi1.website/img/example1.png" alt="example1"/&gt; </p>
    <p>然后调用 Fancybox.bind("[data-fancybox]") 后，Fancybox就会为每个具有 data-fancybox 属性的元素添加 click 监听。在用户点击这些元素后，Fancybox就会为我们添加画廊展示。</p>
    <p><img src="https://static.qi1.website/img/example1.png" alt="效果展示" /></p>
</div>

上述示例中，第一部分是封面，包含一个图片，第二部分是内容，包含两个图片。我们可能想要为封面加一个画廊展示，但只展示它一张，然后正文的其余图片添加到另一个画廊中，与标题中的不同组。

这种情况下，我们可以使用 Fancybox 提供的 “分组” 功能。使用方法是为 data-fancybox 属性添加值，比如 gallery，然后改一下 Fancybox.bind 方法的参数即可。具体就是：

第一组画廊只展示封面：

html

<img src="https://static.qi1.website/img/example1.png" alt="example1" data-fancybox="cover" data-caption="封面" />

第二组画廊展示正文中的所有图片：

html

<img src="https://static.qi1.website/img/example2.png" alt="example2" data-fancybox="gallery" data-caption="图片1" />
<img src="https://static.qi1.website/img/example3.png" alt="example3" data-fancybox="gallery" data-caption="图片2" />

完整的代码是：

html

<div class="Title">
    <img src="https://static.qi1.website/img/example1.png" alt="example1" data-fancybox="cover" data-caption="封面"/>
</div>
<div class="Content">
    <p>
        <img src="https://static.qi1.website/img/example2.png" alt="example2" data-fancybox="gallery" data-caption="正文图片1"/>
    </p>
    <p>
        <img src="https://static.qi1.website/img/example3.png" alt="example3" data-fancybox="gallery" data-caption="正文图片2"/>
    </p>
</div>

然后调用 Fancybox.bind 方法，由于它们属于两组画廊，因此要为每一组都添加事件监听。

Fancybox.bind("[data-fancybox=\"cover\"]");
Fancybox.bind("[data-fancybox=\"gallery\"]");

由于这里，分组是通过为 data-fancybox 指定不同属性值实现的，如果按照上方的方式，单独使用 [data-fancybox="cover"] 选择器将不会为正文中的图片添加幻灯片放映。但由于它们都是使用了 data-fancybox 属性，实际上，用 [data-fancybox] 可以同时选中它们。

Fancybox.bind("[data-fancybox]");

总结

data-src 或 href 属性用于指定幻灯片中图片的展示来源。
具有 data-fancybox 的元素会添加到画廊中，为它们指定分组则可以将同组的 data-fancybox 元素添加相同的值。
data-caption 用于为画廊中的元素添加标题。
Fancybox.bind(selector, config) 为每个幻灯片元素添加事件监听。

Fancybox ​

介绍 ​

安装 ​

使用 NPM 包管理器安装 ​

通过 CDN 引用 ​

使用 - 为要展示的元素添加必要的属性 ​

使用 - 添加事件监听 ​

使用 - 为幻灯片分组 ​

总结 ​

Fancybox

介绍

安装

使用 NPM 包管理器安装

通过 CDN 引用

使用 - 为要展示的元素添加必要的属性

使用 - 添加事件监听

使用 - 为幻灯片分组

总结