LBT Lightbox 响应迅速且易于使用的jQuery画廊灯箱插件

简介

LBT-Lightbox是一个响应迅速且易于使用的jQuery gallery Lightbox插件，它提供了一种用户友好的方式来在您的网站或web应用程序上展示图像和视频。它能够在易于导航的灯箱弹出窗口中显示您的内容，并支持广泛的内容，包括图像、YouTube视频、Vimeo视频和HTML5视频。

（下载的附件中附有DEMO）

更多灯箱画廊插件：👉  [ 详情 ]

非常适合摄影师、艺术家和网络/移动开发人员，他们希望以优雅的方式展示自己的作品集、画廊和项目。

使用

1. 引入文件

<link rel="stylesheet" href="/path/jquery.lbt-lightbox.min.css" />

<script src="/path/jquery.min.js"></script>
<script src="/path/jquery.lbt-lightbox.min.js"></script>

2. HTML

<div id="gallery">
  <div class="item">
    <img src="1.jpg" alt="image1" />
    <div class="caption">
      <p>Description 1</p>
    </div>
  </div>
  <div class="item">
    <img src="2.jpg" alt="image2" />
    <div class="caption">
      <p>Description 2</p>
    </div>
  </div>
  <div class="item">
    <img src="3.jpg" alt="image3" />
    <div class="caption">
      <p>Description 3</p>
    </div>
  </div>
  ... more items here
</div>

3. 调用

初始化插件以创建默认的灯箱库

$('#gallery').lbtLightBox({

  // content selector
  custom_children: ".item img",

  // enable captions
  captions: true,
  captions_selector: ".item p",
  
});

配置缩略图分页（需在服务器上运行，否则缩略图会因 CORS 原因无法显示）

$('#gallery').lbtLightBox({

  // the number of thumbnails in the pagination
  qtd_pagination: 8,

  // width/height of the thumbnail pagination
  pagination_width: "60px",
  pagination_height: "60px",

});

更新图库

$instance = $('#gallery').lbtLightBox({
  // ...
});
$instance.update();

预加载图像

$instance = $('#gallery').lbtLightBox({
  // ...
});
$instance.preload();

启用 IndexedDB 客户端数据库支持

$('#gallery').lbtLightBox({

  db: true,
  
});

相关链接

作者官网 ：  https://jeankassio.dev/

GitHub地址 ：  https://github.com/jeankassio/LBT-Lightbox

易助科技网演示地址 ：  http://demo.easyzone.net.cn/plugin/lbtlightbox/index.html