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