Responsive Image/Video Lightbox Gallery - jQuery LBT-Lightbox
File Size: | 26.5 KB |
---|---|
Views Total: | 3205 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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:
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-05-21
- Bug Fixes: Prevented creating duplicate windows
- Added: OpenViewer method for custom calls
2023-05-14
- bug fix - Vídeo player
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.
- Prev: Image Gallery With In-place Zoom Functionality
- Next: None