Minimal Responsive Gallery Lightbox Plugin with jQuery - iLightbox

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.