阅读量:0
jQuery FancyBox 是一种用于创建响应式、触摸友好的图像和内容弹出窗口的插件。以下是一个简单的代码示例，展示了如何使用 jQuery FancyBox：
- 首先，确保在您的 HTML 文件中包含了 jQuery 和 FancyBox 的相关文件。您可以从官方网站下载这些文件，或者使用 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 文件中添加一个包含图像链接的元素。例如：
<a href="https://example.com/path/to/your/image.jpg" data-fancybox="gallery" class="fancybox"> <img src="https://example.com/path/to/your/thumbnail.jpg" alt="" /> </a> 在这个例子中，我们使用了 data-fancybox 属性来指定要打开的图像集合，并使用了 gallery 值。class="fancybox" 是可选的，但推荐使用，以便可以通过 CSS 为 FancyBox 添加样式。
- 现在，当用户点击带有
fancybox类的元素时，FancyBox 应该会自动打开并显示关联的图像。您还可以使用 JavaScript 初始化 FancyBox，如下所示：
$(document).ready(function() { $('.fancybox').fancybox(); }); 这将确保在页面加载完成后，FancyBox 会被应用到所有具有 fancybox 类的元素上。
这就是一个简单的 jQuery FancyBox 示例。您可以在官方网站上找到更多关于 FancyBox 的信息和选项，以便根据您的需求进行定制。
