使用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演示文件。
免责声明：1.凡本站注明“来源：XXX（非天荣模板网）”的作品，均转载自其它媒体，所载的文章、图片、音频视频文件等资料的版权归版权所有人所有，如有侵权，请联系tianrongcms#foxmail.com处理；2.凡本站转载内容仅代表作者本人观点，与天荣模板网无关。凡本站转载内容仅代表作者本人观点，与本站无关。
凡本站转载内容仅代表作者本人观点，与本站无关。
相关文档
0 条评论
