联系官方销售客服

1835022288

028-61286886

分享经验 版主:论坛审计组
分享使用弹出窗口插件实现图片/视频点击弹出浏览(相册效果)
类型:迅睿CMS 更新时间:2024-10-26 01:45:35

客户需要制作点击弹出层浏览图片/视频(相册功能),分享一下使用FancyBox弹出窗口插件实现方法。

这个效果应用的范围很广,比如详情页的图集功能、相册功能、列表页的图片预览、视频弹出播放等等。不仅可以实现弹出层浏览,而且可以左右切换,查看列表等,效果如下图:


16869028368468be

具体步骤如下:

引用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文件。


回帖
  • html
    #1楼    html
    2023-06-16 22:24:13
    Chrome 1
    学习研究一下下
  • user_falle
    #2楼    user_falle
    2023-06-17 11:52:04
    Chrome 0
    学习研究一下下
  • 康露依
    #3楼    康露依
    2023-06-17 12:16:48
    Chrome 0
    学习学习学习
  • 风的颜色
    #4楼    风的颜色
    2023-07-03 21:42:15
    Chrome 0
    学习研究一下下
  • 大千世界
    #5楼    大千世界
    2023-07-19 08:45:21
    Chrome 0
    学习研究一下下
  • 木木建站
    #6楼    木木建站
    2023-07-19 15:27:14
    Chrome 0
    学习研究一下下
  • 不停游的鱼
    #7楼    不停游的鱼
    2023-07-20 14:40:42
    Chrome 0
    • 学习研究一下下

  • 隽
    #8楼    隽
    2023-07-21 00:37:39
    Chrome 0
    学习研究一下下
  • 小鸽子
    #9楼    小鸽子
    2023-07-25 11:09:36
    Chrome 0
    学习研究一下下
  • henna
    #10楼    henna
    2023-07-26 13:41:57
    安卓手机 0
    学习研究一下
  • ryanshaw
    #11楼    ryanshaw
    2023-08-01 18:35:27
    Chrome 0
    学习研究一下下
  • 不耻下问小菜新
    #12楼    不耻下问小菜新
    2023-08-08 13:43:20
    Chrome 0
    学习研究一下下
  • zjh2001
    #13楼    zjh2001
    2023-08-08 15:49:55
    Chrome 0
    学习研究一下下
  • ffs2023
    #14楼    ffs2023
    2023-08-11 09:27:40
    Edge 0
    学习研究一下下下
  •   星 空
    #15楼    星 空
    2023-08-11 10:52:43
    Edge 0
    学习研究一下下
  • 执伞人
    #16楼    执伞人
    2023-09-15 17:31:04
    Edge 0
    学习研究一下下
  • 听海
    #17楼    听海
    2023-09-15 23:43:23
    Firefox 117.0 0
    学习研究一下下
  • conch
    #18楼    conch
    2023-09-16 14:03:26
    Firefox 117.0 0
    学习研究一下下
  • 嘟嘟小将-爆仓专业户
    #19楼    嘟嘟小将-爆仓专业户
    2023-09-18 10:14:05
    Chrome 0
    学习研究一下下
  • yymgary
    #20楼    yymgary
    2023-10-10 11:31:47
    Chrome 0
    学习研究一下
  • 胡银萍
    #21楼    胡银萍
    2023-10-24 16:34:22
    Chrome 0
    学习研究一下
  • 找寻知音
    #22楼    找寻知音
    2023-10-24 19:29:34
    Edge 0
    学习研究一下下
  • nebula
    #23楼    nebula
    2023-10-25 17:55:48
    Firefox 118.0 0
    学习研究一下下
  • 1251964649
    #24楼    1251964649
    2023-11-09 18:50:00
    Chrome 0
    学习研究一下下
  • 木木木木
    #25楼    木木木木
    2023-11-10 10:13:28
    Chrome 0
    学习研究一下下
  • yudeleishu
    #26楼    yudeleishu
    2023-11-10 19:52:35
    Chrome 0
    学习研究一下下
  • 麦尖
    #27楼    麦尖
    2023-11-11 15:36:41
    Chrome 0
    学习研究一下下
  • 四分音符
    #28楼    四分音符
    2023-11-18 08:56:49
    Chrome 0
    学习研究一下下学习研究一下下
  • 葫芦娃
    #29楼    葫芦娃
    2023-11-23 18:20:09
    Edge 0
    学习研究一下下学习研究一下下
  • 伦少
    #30楼    伦少
    2023-11-24 08:26:37
    Edge 0
    学习研究一下下学习研究一下下
  • 江小白
    #31楼    江小白
    2024-01-21 09:59:13
    Chrome 0
    学习一下,研究研究
  • hydjw
    #32楼    hydjw
    2024-01-27 21:44:08
    Chrome 0
    学习下 看看
  • gzwtqx_2024
    #33楼    gzwtqx_2024
    2024-02-16 12:01:03
    Chrome 0
    学习下 看看
  • 1239
    #34楼    1239
    2024-02-17 15:17:46
    Chrome 0
    • 学习研究一下下
  • 网络那点事
    #35楼    网络那点事
    2024-02-19 14:33:33
    Chrome 0
    学习研究一下下
  • 小飞鸡。
    #36楼    小飞鸡。
    2024-03-04 14:03:52
    Chrome 0
    学习研究一下下
  • 31673soft
    #37楼    31673soft
    2024-03-22 07:33:43
    Edge 0
    谢谢分享,学习一下
  • 学习狂人
    #38楼    学习狂人
    2024-03-23 10:01:16
    Chrome 0
    • 学习研究一下下

  • 大鱼
    #39楼    大鱼
    2024-04-01 15:59:07
    Chrome 0
    本部分内容设定了隐藏,需要回复后才能看到
  • 王小五
    #40楼    王小五
    2024-04-01 20:19:52
    Chrome 0
    谢谢分享,学习一下!!!!
  • 和
    #41楼    和
    2024-04-06 23:25:31
    Edge 0
    谢谢分享,学习一下!!!!
  • 杨杨杨
    #42楼    杨杨杨
    2024-04-08 10:07:00
    Chrome 0
    学习研究一下下
  • dtdyx1988
    #43楼    dtdyx1988
    2024-04-25 01:21:18
    Edge 0
    学习研究一下下
  • stechn
    #44楼    stechn
    2024-08-19 02:50:19
    Edge 0
    过来学习,研究一下下
  • yichen
    #45楼    yichen
    2024-09-15 11:30:20
    Chrome 0
    看下能不能用的到
  • wlrm123
    #46楼    wlrm123
    2024-09-20 16:22:11
    Chrome 0
    学习学习学习学习
  • 林同学er
    #47楼    林同学er
    2024-09-26 04:04:05
    Chrome 0
    学习研究一下下
  • 维嘉
    #48楼    维嘉
    2024-09-30 09:50:17
    Chrome 0
    学习研究一下下
  • perweb
    #49楼    perweb
    2024-09-30 11:24:31
    Chrome 0
    • 学习研究一下下下
  • zhongqi
    #50楼    zhongqi
    2024-10-05 13:15:55
    Chrome 0
    学习研究一下下
  • 米的
    #51楼    米的
    2024-10-12 11:18:34
    Edge 0
    学习研究一下下
  • nemoccc
    #52楼    nemoccc
    2024-10-13 09:37:42
    Chrome 0
    学习研究一下下
  • 李富贵儿
    #53楼    李富贵儿
    2024-10-16 11:12:43
    Chrome 0
    学习研究一下下
  • coffer26
    #54楼    coffer26
    2024-10-20 10:29:56
    小米手机 0
    学习研究一下下
  • yunshj
    #55楼    yunshj
    2024-10-26 01:45:35
    Chrome 0
    学习研究一下