基于Bootstrap 5的功能丰富的灯箱图库 - bs5-lightbox.js
栏目分类:模态 / 弹出窗口   发布日期:2021-10-06   浏览次数:

一个 JavaScript灯箱画廊插件,用于在 Bootstrap 5 模态和轮播组件中展示图像、视频、Instagram 帖子、iframe。

使用:

1. 将 JavaScript 文件 bs5-lightbox.js 导入您的 Bootstrap 5 项目。

// With NPM
# NPM
$ npm i bs5-lightbox
import Lightbox from 'bs5-lightbox'
// 浏览器
<!-- Bootstrap 5 -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>
<!-- Bootstrap 5 -->
<script src="/path/to/cdn/bs5-lightbox.min.js"></script>

2. 创建单个灯箱。

<a href="1.jpg" data-toggle="lightbox">
  <img src="thumb-1" alt="点击放大" />
</a>

3. 创建一个包含混合内容的灯箱画廊。

<!-- 图片-->
<a href="1.jpg" data-toggle="lightbox" data-gallery="my-gallery">
  <img src="thumb-1" alt="点击放大" />
</a>
<!-- 或 -->
<img src="thumb.jpg" data-toggle="lightbox" data-src="1.jpg" data-gallery="my-gallery" />
 
<!-- Youtube 视频 -->
<a href="https://www.youtube.com/watch?v=VIDEOID" data-toggle="lightbox" data-gallery="my-gallery">
  <img src="thumb-2.jpg" />
</a>
 
<!-- Vimeo 视频 -->
<a href="https://vimeo.com/VIDEOID" data-remote="https://player.vimeo.com/video/VIDEOID" data-toggle="lightbox" data-gallery="my-gallery" >
  <img src="thumb-3" />
</a>
 
<!-- Instagram 帖子 -->
<a href="https://instagram.com/p/POSTID/" data-toggle="lightbox" data-title="自定义标题" data-gallery="my-gallery">
  <img src="thumb-4" />
</a>
 
<!-- 远程 URL -->
<a href="https://www.html369.cn/" data-title="标题名称" data-toggle="lightbox" data-gallery="mixedgallery">
  CSSScript.com
</a>

4.在没有提供扩展的情况下确定媒体类型。

  • 'image'

  • 'YouTube'

  • 'vimeo'

  • 'Instagram'

  • 'video'

  • 'url'

<a href="https://www.html369.cn/" data-toggle="lightbox" data-type="image">
  点击我打开
</a>


官方网站:https://github.com/trvswgnr/bs5-lightbox

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库