阅读量:0
要选择 jQuery FancyBox，请按照以下步骤操作：
- 首先，确保您已经在项目中包含了 jQuery 和 FancyBox 的库文件。您可以从官方网站 http://fancyapps.com/fancybox/3/ 下载它们，或者通过 CDN 方式引入。在您的 HTML 文件的
<head>部分添加以下代码：
<!-- 引入 jQuery --> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 引入 FancyBox CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" /> <!-- 引入 FancyBox JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script> - 在 HTML 文件中，为您想要使用 FancyBox 显示的元素添加特定的类（例如
fancybox）：
<a href="large-image.jpg" data-fancybox="gallery" class="fancybox"> <img src="small-image.jpg" alt="" /> </a> 在这个例子中，我们使用了 data-fancybox 属性来指定 FancyBox 的配置，以及 gallery 值来表示这是一个图片画廊。
- 接下来，通过 JavaScript 初始化 FancyBox。将以下代码添加到您的项目中的适当位置（例如在
$(document).ready()函数内）：
$(document).ready(function() { $('.fancybox').fancybox(); }); 这将使得所有具有 fancybox 类的元素都能使用 FancyBox 进行显示。
现在您已经成功选择了 jQuery FancyBox。点击带有 fancybox 类的链接或图片，它们将以 FancyBox 形式打开。
