Minimal Responsive Gallery Lightbox Plugin with jQuery - iLightbox
File Size: | 23.9 KB |
---|---|
Views Total: | 6600 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
iLightbox is a lightweight and easy jQuery lightbox plugin which allows you embed and display a gallery of Html elements in a responsive modal window.
Features:
- Left/right arrows navigation.
- Responsive design across devices.
- Image loader.
- Click the overlay/close button or or press the ESC key to close the lightbox.
- Navigate through a series of medias like a slider.
- Supports any media types such as images, iframes, ajax content, inline html, videos, SWFs, etc.
Basic Usage:
1. Load the required jQuery iLightbox plugin's stylesheet in the head section.
<link href="jquery.lightbox.css" rel="stylesheet">
2. Load jQuery library and the jQuery iLightbox plugin's script in the document.
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="jquery.lightbox.min.js"></script>
3. Insert a group of Html elements into your document and use Html5 data-*
attributes to specify the options for each element.
data-lightbox-title
: lightbox title.data-lightbox-gallery
: all the elements must have a same gallery name.data-lightbox-type
: 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html'.
<a href="1.jpg" data-lightbox-title="Simple Image" data-lightbox-gallery="gallery"> <img src="thumb.jpg"> </a> <a href="https://www.youtube.com/embed/84NI5fjTfpQ?autoplay=1" data-lightbox-gallery="gallery" data-lightbox-type="iframe"> <img src="cover.jpg" /> </a> <a href="demo.swf" data-lightbox-gallery="gallery" data-lightbox-type="swf"> SWF </a>
4. Initialize the plugin to enable the gallery lightbox.
$(document).ready(function(e) { $('a[data-lightbox-gallery]').iLightbox(); });
5. Default options and callback functions.
$('a[data-lightbox-gallery]').iLightbox({ //'image', 'ajax', 'iframe', 'swf' and 'html' type: "image", width: "auto", height: "auto", loop: true, arrows: true, closeBtn: true, title: null, href: null, content: null, openEffect: "fade", closeEffect: "fade", animation: "slide", beforeShow: function(e, t) {}, onShow: function(e, t) {}, beforeClose: function() {}, afterClose: function() {}, onUpdate: function(e) {}, template: { container: '<div class="iLightbox-container"></div>', image: '<div class="iLightbox-media"></div>', iframe: '<div class="iLightbox-media iLightbox-iframe"></div>', title: '<div class="iLightbox-details"></div>', error: '<div class="iLightbox-error">The requested content cannot be loaded.<br/>Please try again later.</div>', closeBtn: '<a href="#" class="iLightbox-close"></a>', prevBtn: '<div class="iLightbox-btnPrev"><a href="javascript:;"></a></div>', nextBtn: '<div class="iLightbox-btnNext"><a href="javascript:;"></a></div>' } });
Change logs:
2015-01-21
- update.
2015-01-19
- update.
This awesome jQuery plugin is developed by CreativeDream. For more Advanced Usages, please check the demo page or visit the official website.