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

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.