使用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(非老K模板网)”的作品,均转载自其它媒体,所载的文章、图片、音频视频文件等资料的版权归版权所有人所有,如有侵权,请联系laokcms#126.com处理;2.凡本站转载内容仅代表作者本人观点,与老K模板网无关。
相关文档
- SEO百度点击软件真的能让你一夜之间冲上首页吗?
- seo点击优化,优化seo设置
- 引擎力Google seo优化师实战经验:什么是301重定向,如...
- 如何制作高质量的视频来提升你的谷歌SEO效果
- 新版 Search Console 视频索引报告正式推出
- 外贸网站建设之如何使用Canonical标签
- Ahrefs使用教程
- 引擎力google优化实战篇:如何在 Youtube 视频上提供...
- SEMrush使用教程
- seo短视频网页入口网站,seo1短视频第15
- seo优化点击软件,seo点击软件哪个好用
- zblog插件全自动采集伪原创发布插件免费
- zblog插件-站长必备zblog插件
- 如何通过“ChatGPT行程签证”轻松实现全球旅行梦想
- Zblog采集-Zblog自动采集-Zblog免登录发布插件
- pbootcms模板修改tags实现keywords内容关联匹配
- pbootcms提示提交失败,请使用POST方式提交
- pbootcms模板导航设置外链时新窗口打开
- 如何在PbootCMS中实现无刷新点赞功能?
- PbootCMS实现数字条分页样式效果
0 条评论