Fullscreen Responsive Gallery Lightbox Plugin - SimpleLightbox

File Size: 1.05 MB
Views Total: 22443
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Fullscreen Responsive Gallery Lightbox Plugin - SimpleLightbox

A simple yet highly configurable jQuery & JavaScript plugin for creating a tiled photo/video gallery that allows to display images (or Youtube/Vimeo videos) in a fullscreen, responsive lightbox popup as you click on a thumbnail.

How to use it:

1. Include the simpleLightbox.css stylesheet in the head for basic gallery styles.

<link href="dist/simpleLightbox.css" rel="stylesheet">

2. Add thumbnails and large images to the gallery following the markup structure like this:

<div class="gallery">
  <a title="Image 1" href="large-1.jpg">
    <img src="thumb-1.jpg">
  <a title="Image 2" href="large-2.jpg">
    <img src="thumb-2.jpg">
  <a title="Image 3" href="large-3.jpg">
    <img src="thumb-3.jpg">

3. Include jQuery JavaScript library (OPTIONAL) and the simpleLightbox.js script in the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="dist/simpleLightbox.js"></script>

4. Initialize the gallery lightbox by calling the function on the a tag.

// As a JavaScript plugin
new SimpleLightbox({
  elements: '.gallery a',
  // more options here

// As a jQuery plugin
$('.gallery a').simpleLightbox({
  // options here

5. Or directly create a gallery from an array of images.

  items: ['1.jpg', '2.jpg', '3.jpg']

6. Youtube & Vimeo Videos are supported as well.

<a class="lightBoxVideoLink" href="https://www.youtube.com/embed/qtQgbdmIO30?autoplay=true">Show a video</a>

7. Plugin's default configuration options.

// add custom classes to lightbox elements
elementClass: '',
elementLoadingClass: 'slbLoading',
htmlClass: 'slbActive',
closeBtnClass: '',
nextBtnClass: '',
prevBtnClass: '',
loadingTextClass: '',

// customize / localize controls captions
closeBtnCaption: 'Close',
nextBtnCaption: 'Next',
prevBtnCaption: 'Previous',
loadingCaption: 'Loading...',

bindToItems: true, // set click event handler to trigger lightbox on provided $items
closeOnOverlayClick: true,
closeOnEscapeKey: true,
nextOnImageClick: true,
showCaptions: true,

captionAttribute: 'title', // choose data source for library to glean image caption from
urlAttribute: 'href', // where to expect large image

startAt: 0, // start gallery at custom index
loadingTimeout: 100, // time after loading element will appear

appendTarget: 'body', // append elsewhere if needed

beforeSetContent: null, // convenient hooks for extending library behavoiur
beforeClose: null,
afterClose: null,
beforeDestroy: null,
afterDestroy: null,

videoRegex: new RegExp(/youtube.com|vimeo.com/) // regex which tests load url for iframe content

6. API methods.

// Go to next image

// Go to previous image

// Close lightbox

// Destroy

// Open lightbox

// Open lightbox at certain position

// Set custom content
lightbox.setContent('<div>My content</div>');


v2.1.0 (2019-11-25)


  • Add background colour to image container for images with transparency


  • added UMD support


  • lightbox layout adjustments for video and image captions


  • initialisation work centralised and delegated to init method


  • UI adjustments for loading image use case


  • Adjusted before destroy hook


  • Adjusted before close hook


  • update close button css


  • append target updated
  • css adjustments

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