Responsive Image/Video Lightbox Gallery - jQuery LBT-Lightbox

LBT-Lightbox is a responsive and easy-to-use jQuery gallery lightbox plugin that provides a user-friendly way to showcase images and videos on your website or web application.

It has the ability to display your content in an easy-to-navigate lightbox popup and supports a wide range of content, including images, YouTube videos, Vimeo videos, and HTML5 videos. 

Ideal for photographers, artists, and web/mobile developers who want to showcase their portfolios, galleries, and projects in an elegant way.

See Also:

• 10 Best Lightbox Gallery Plugins In JavaScript & CSS

How to use it:

1. Get started by loading the required JavaScript and CSS files as displayed below:

<link rel="stylesheet" href="/path/to/dist/css/jquery.lbt-lightbox.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/dist/js/jquery.lbt-lightbox.min.js"></script>

2. Add your content together with captions to the gallery.

<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. Initialize the plugin to create a default lightbox gallery.

$('#gallery').lbtLightBox({

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

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

4. Config the thumbnail pagination.

$('#gallery').lbtLightBox({

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

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

});

5. Update the gallery.

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

6. Preload images.

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

7. Enable the IndexedDB client-side database support.

$('#gallery').lbtLightBox({

  db: true,
  
});

Changelog:

2023-02-07

• Add IndexedDB Support

2023-02-03

• Added preload function

2023-02-02

• Bugfix

---

This awesome jQuery plugin is developed by jeankassio. For more Advanced Usages, please check the demo page or visit the official website.