Minimal Responsive Gallery Lightbox Plugin with jQuery - iLightbox

Minimal Responsive Gallery Lightbox Plugin with jQuery - iLightbox
File Size: 23.9 KB
Views Total: 6446
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.


  • 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="//"></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 href="" data-lightbox-gallery="gallery" data-lightbox-type="iframe">
  <img src="cover.jpg" /> 

<a href="demo.swf" data-lightbox-gallery="gallery" data-lightbox-type="swf">

4. Initialize the plugin to enable the gallery lightbox.

$(document).ready(function(e) {

5. Default options and callback functions.

//'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:


  • update.


  • update.

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