使用FancyBox弹出窗口插件实现图片/视频点击弹出层浏览

在建站中，FancyBox弹出窗口插件应用的范围很广，比如详情页的图集功能、相册功能、列表页的图片预览、视频弹出播放等等。不仅可以实现弹出层浏览，而且可以左右切换，查看列表等，今天分享一下使用方法。效果如下图：

引用fancybox所需要的文件

你可以下载至本地（文末可下载）或者引用CDN。CDN引用代码示例：

<link href="https://cdn.bootcss.com/fancybox/3.3.5/jquery.fancybox.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/fancybox/3.3.5/jquery.fancybox.min.js"></script>

编写相册所需的HMTL代码

只需要把图片 或 视频 地址放到a标签中，加入data-fancybox="images"即可，代码示例如下：

<div>
  <ul>
    <li>
      <a href="图片地址1 或 视频地址1" data-fancybox="images">内容</a>
    </li>
    <li>
      <a href="图片地址1 或 视频地址2" data-fancybox="images">内容</a>
    </li>
    <li>
      <a href="图片地址1 或 视频地址3" data-fancybox="images">内容</a>
    </li>
  </ul>
</div>

温馨提示

FancyBoxs是基于jquery开发的类Lightbox插件，所以记得引用jquery文件，具体可下载下方DEMO演示文件。

教程附件

天客隆模板网管理员

扫码免费体验 GPT-4 链接