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>
  <a title="Image 2" href="large-2.jpg">
    <img src="thumb-2.jpg">
  </a>
  <a title="Image 3" href="large-3.jpg">
    <img src="thumb-3.jpg">
  </a>
</div>

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.

SimpleLightbox.open({
  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>

$('.lightBoxVideoLink').simpleLightbox();

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
lightbox.next();

// Go to previous image
lightbox.prev();

// Close lightbox
lightbox.close();

// Destroy
lightbox.destroy();

// Open lightbox
lightbox.show();

// Open lightbox at certain position
lightbox.showPosition(1);

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

Changelog:

v2.1.0 (2019-11-25)

• Doc updated

2016-12-03

• Add background colour to image container for images with transparency

2016-01-14

• added UMD support

2015-12-28

• lightbox layout adjustments for video and image captions

2015-12-21

• initialisation work centralised and delegated to init method

2015-12-11

• UI adjustments for loading image use case

2015-10-27

• Adjusted before destroy hook

2015-10-14

• Adjusted before close hook

2015-09-17

• update close button css

2015-08-24

• 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.