Fancybox 是一个轻量级、快速、易于使用的 jQuery 照片画廊插件。它可以让你创建漂亮的弹出框，支持图片、HTML 内容、媒体和 iframe。
在本文中，我们将学习如何使用 npm 包 fancybox 来添加照片画廊到您的网站或应用程序。
准备工作
在开始之前，请确保您已经安装了 Node.js 和 npm。如果没有，请从官方网站下载并安装。
安装 Fancybox
要安装 fancybox，打开终端并输入以下命令：
npm install @fancyapps/fancybox
这将下载并安装 fancybox 的最新版本。
添加样式和脚本
要使用 fancybox，我们需要添加它的样式和脚本。您可以通过将以下代码添加到您的 HTML 文件中来引入它们：
<link rel="stylesheet" href="/node_modules/@fancyapps/fancybox/dist/jquery.fancybox.min.css"> <script src="/node_modules/@fancyapps/fancybox/dist/jquery.fancybox.min.js"></script>
请注意，在上面的代码中，我们假设您已经将 fancybox 安装到项目的根目录下。如果 fancybox 安装在另一个目录，则需要相应地更改路径。
创建基本画廊
现在，我们已经准备好开始创建我们的画廊了。以下是一个基本的 HTML 结构：
-- -------------------- ---- -------
---- ----------------
-- ------------------- --------------
---- -------------------
----
-- ------------------- --------------
---- -------------------
----
-- ------------------- --------------
---- -------------------
----
------请注意，每个链接都有一个 data-fancybox 属性，它告诉 fancybox 这是一个画廊元素。
现在，我们需要添加一些 JavaScript 代码来初始化 fancybox。以下是一个示例：
-- -------------------- ---- -------
-------------------------------
-------- -
-------
------------
-------------
-----------
---------
-------
--
----- -----
---------------- -------
----------------- -------
-------- ----
---在上面的代码中，我们指定了一些选项，例如按钮、循环、动画效果和保护等级。您可以根据需要更改这些选项。
结论
现在，您已经学会了如何使用 npm 包 fancybox 来添加漂亮的照片画廊到您的网站或应用程序。希望这篇文章对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/32868
