javascript

当前位置：首页 > 前端 > javascript

fancybox 弹窗插件（视频）

更新时间：2024-12-16 13:49:54 编辑：保利尼奥浏览：992

<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>

<ul class="shebei-list flex wrap">
     @foreach (inject('ad')->ad(7) as $key => $value)
     <li>
         <a href="{{ webp($value['img']) }}" title="{{ $value['title'] }}" data-fancybox="cert">
              <h3>{{ $value['title'] }}</h3>
              <div class="small-img"><img src="{{ webp($value['img']) }}"></div>
         </a>
     </li>
     @endforeach
 </ul>

<link rel="stylesheet" href="{{ themePath('css/fancybox.css') }}">
<script src="{{ themePath('js/fancybox.min.js') }}"></script>

第三方视频弹出
<a class="hahahg2 fr" data-fancybox="" auotoSize="false" data-type="iframe" data-width="950" data-height="598" href="<!--{$volist.fname}-->">
 <img src="<!--{$skinpath}-->assets/images/imgaa.png"/>
 <span>点击观看</span>
</a>


图片弹出
<a href="<!--{$volist.thumbfiles}-->" class="fancybox img" data-fancybox-group="gallery" title="<!--{$volist.title}-->">
<img src="<!--{$volist.thumbfiles}-->" alt="<!--{$volist.title}-->" /></a>
<script>
 $(document).ready(function() {
  $('.fancybox').fancybox();
 });    	
</script>

本地视频弹出
<a data-fancybox data-width="800" data-height="" href="<!--{$skinpath}-->assets/images/sp1.mp4" class="anniusp">
   <img src="<!--{$skinpath}-->assets/images/agvfhghg1.png"/>
</a>

收藏打印

上一篇：swiper 双排切换分组

下一篇：js 根据链接url做跳转

文章评论

共 0 条评论，查看全部

这篇文章还没有收到评论，赶紧来抢沙发吧~

javascript

fancybox 弹窗插件（视频）

相关内容

文章评论

点击排行

文章归档

评论排行榜

热门标签