Responsive Multi-Purpose jQuery Lightbox Plugin - lightboxSE
File Size: | Unknown |
---|---|
Views Total: | 1641 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.