Responsive Multi-Purpose jQuery Lightbox Plugin - lightboxSE

lightboxSE is a simple jQuery lightbox plugin for displaying various multimedia content in a responsive popup window.

Features:

• Auto resize for responsive design.
• Allows to slide through a group of images like a slideshow that we call it 'gallery lightbox'.
• Supports images, videos, external links, etc.
• Cool animation while opening or closing the lightbox.
• Image caption and keyboard navigation supported.
• Lots of options to customize the lightbox however you like.

How to use it:

1. Load the required CSS file in the head section of the page.

<link href="scripts/lightboxSE.css" rel="stylesheet" />

2. Load the jQuery library and jQuery lightboxSE's javascript at the end of the page to reduce the page load time.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="scripts/lightboxSE.min.js"></script> 

3. Insert a group of images to display them in a slideshow. Pass options to the lightbox by using the data-options attributes, or by passing them in javascript.

<a href="1.jpg" data-lightbox="true" data-slideshow="1" data-caption="caption 1">Image 1</a> 
<a href="2.jpg" data-lightbox="true" data-slideshow="2" data-caption="caption 2">Image 2</a> 
<a href="3.jpg" data-lightbox="true" data-slideshow="3" data-caption="caption 3">Image 3</a> 
...

4. Initialization on document ready.

<script type='text/javascript'>
$(document).ready(function(){
$('a[data-lightbox*=true]').lightboxSE();
})
</script>

5. All the available options.

<script type='text/javascript'>
$(document).ready(function(){
$('a[data-lightbox*=true]').lightboxSE({
animateLightbox:true,// animate opening and closing the lightbox

autoPlay:true,// auto play the slideshow

backgroundClickable: true,// does clicking on the background close the lightbox

backgroundOpacity:'0.6',// opacity of the background

keyboard:true,// whether or not to capture right and left key for next and previous

overlayer:true,// whether or not to create an overlayer to prevent image grab

showCaptionBar:true,// show caption bar or not when caption present

showCaptionBarAlways:false,// show the caption regardless of caption or not

showPlayPause:true,// show the play / pause buttons

showPrevNext:true,// show the prev / next buttons

slideshowTime:4000,// timer in milliseconds for slideshow - set to 0 for no timer

showToolTip: true,// true, false - show the tool tips

closeToolTip: 'Close (Esc)',

nextToolTip: 'Next (>)',

pauseToolTip: 'Pause',

playToolTip: 'Play',

prevToolTip: 'Previous (<)'
});
})
</script>

---

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