Fullscreen Responsive Gallery Lightbox Plugin - SimpleLightbox

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

A simple yet highly configurable jQuery plugin for creating a tiled photo gallery that allows to display the large images 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 and the simpleLightbox.js script in the webpage.

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

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

$('.gallery a').simpleLightbox();

5. Plugin's default configuration options.

// CSS classes added to the gallery
elementClass: '',
htmlClass: 'slbActive',
closeBtnClass: '',
nextBtnClass: '',
prevBtnClass: '',
loadingClass: '',


// Text for controls
closeBtnCaption: 'Close',
nextBtnCaption: 'Next',
prevBtnCaption: 'Previous',
loadingCaption: 'Loading...',

// Set click event handler to trigger lightbox on provided $items
bindToItems: true,

// Click on the overlay to close the gallery lightbox
closeOnOverlayClick: true,

// Click on the image to goto the next image
nextOnImageClick: true,

// Show image captions
showCaptions: true,

// Generate image captions from a's title attribute
captionAttribute: 'title',

// The path to the large image will be placed href attribute
urlAttribute: 'href',

// Start gallery at custom index
startAt: 0,

// Time after loading element will appear
loadingTimeout: 100,

// Append elsewhere if needed
appendTarget: $('body'),

// Callbacks
beforeSetContent: null,
beforeClose: null,
beforeDestroy: null,

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

6. Public 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>');

Change log:

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.