Responsive Lightbox Slider with jQuery Featherlight Plugin

The Featherlight is a lightweight jQuery lightbox plugin to show images, iframes, videos and inline contents. It is a simple yet flexible responsive lightbox slider built with jQuery and CSS. It creates a basic image gallery and load actual image when user click on image thumbnail.

The plugin provides classes for each element to customize with CSS styles. Also, you can fully configure it with its available options.

Plugin Overview

Plugin: Featherlight
Author: noelboss
Licence: MIT Licence
Published: June 13, 2019
Repository: Fork on GitHub
Dependencies: jQuery 1.3.1 or Latest version
File Type: zip archive (Images, HTML, CSS & JavaScript )
Package Size: 824 KB

How to Use 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 image gallery and add your images in it.

<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 jQuery document ready function with all default options to active the lightbox slider.

$(document).ready(function(){

   $('.gallery').featherlightGallery();
					
});

Advance Configuration Options for Responsive Lightbox Slider

The following are some advance configuration options to create / customize “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 weather to close lightbox on clik anywhere. Default: ‘backgrund’, Type: String / Bool.
false to disable.

$('.gallery').featherlightGallery({
   closeOnClick: false,
});