The Featherlight is a lightweight jQuery lightbox plugin to show images, iframes, videos, and inline content. It is a simple yet flexible responsive lightbox slider built with jQuery and CSS. It creates a basic image gallery and loads the actual image when the user clicks on the image thumbnail.
The plugin provides classes for each element to customize with CSS styles. Also, you can fully configure it with its available options.
How to Create a jQuery Lightbox Slider
1. Load the jQuery and Featherlight‘s CSS and JavaScript files into your HTML document.
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- Featherlight CSS --> <link type="text/css" rel="stylesheet" href="css/featherlight.css" /> <link type="text/css" rel="stylesheet" href="css/featherlight.gallery.css" /> <!-- Featherlight JS --> <script src="js/featherlight.js" type="text/javascript" charset="utf-8"></script> <script src="js/featherlight.gallery.js" type="text/javascript" charset="utf-8"></script>
2. After that, create a basic HTML structure for the image gallery and add your images.
<div class="container">
<div class="row">
<div class="col-lg-2">
<a class="thumbnail gallery" href="assets/images/droplets.jpg"><img src="assets/images/droplets.thumb.jpg" /></a>
</div>
<div class="col-lg-2">
<a class="thumbnail gallery" href="assets/images/blue.jpg"><img src="assets/images/blue.thumb.jpg" /></a>
</div>
<div class="col-lg-2">
<a class="thumbnail gallery" href="assets/images/feed.jpg"><img src="assets/images/feed.thumb.jpg" /></a>
</div>
<div class="col-lg-2">
<a class="thumbnail gallery" href="assets/images/black.jpg"><img src="assets/images/black.thumb.jpg" /></a>
</div>
<div class="col-lg-2">
<a class="thumbnail gallery" href="assets/images/red_and_yellow.jpg"><img src="assets/images/red_and_yellow.thumb.jpg" /></a>
</div>
</div>
3. Finally, initialize the plugin in the jQuery document ready function with all default options to activate the lightbox slider.
$(document).ready(function(){
$('.gallery').featherlightGallery();
});
Advanced Configuration Options
The following are some advanced configuration options to create/customize a “jQuery responsive lightbox slider”.
| Option | Description, Default, Type |
|---|---|
openTrigger & closeTrigger |
These options define the event type on which the lightbox will open / close. Default: “click”, Type: String.
$('.gallery').featherlightGallery({
openTrigger: 'click',
closeTrigger: 'click',
});
|
openSpeed & closeSpeed |
Define the transition duration in milliseconds for lightbox open & close. Default: 250, Type: Number.
$('.gallery').featherlightGallery({
openSpeed: 250,
closeSpeed: 250,
});
|
loading |
Content to show while initial content is loading. Default: ”, Type: String.
$('.gallery').featherlightGallery({
loading: "",
});
|
closeOnClick |
Decide whether to close the lightbox on click anywhere. Default: ‘background’, Type: String / Bool. false to disable. $('.gallery').featherlightGallery({
closeOnClick: false,
});
|
That’s all! hopefully, you have successfully created a responsive lightbox slider using jQuery. If you have any questions or suggestions, feel free to comment below.
Similar Code Snippets:
- Lightweight Image Slider in Vanilla JS
- Bootstrap 5 Animated Cards Slider
I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.