Tiny Lightbox Plugin For Images And Galleries - light.js

A super tiny and fully responsive lightbox jQuery plugin to showcase your images and/or image groups in a simple, elegant way.

More features:

• Supports image descriptions/captions.
• Next/prev buttons to navigate between images in a group.
• Click outside to close the lightbox.
• Keyboard interactions.
• Image not Found handling.

How to use it:

1. Insert the stylesheet jquery.light.css and JavaScript jquery.light.js into the HTML file.

<link rel="stylesheet" href="./src/jquery.light.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="./src/jquery.light.js"></script>

2. Insert image links to the a tag and define the descriptions in the data-caption attribute.

<a href="full.jpg" 
   data-caption="This is my caption" 
   rel="light">
   <img src="thumb.jpg">
</a>

3. To create a gallery lightbox, just group the images using the data-gallery attribute.

<a href="full-1.jpg" 
   data-caption="This is my caption" 
   data-gallery="1"
   rel="light">
   <img src="thumb-1.jpg">
</a>

<a href="full-2.jpg" 
   data-caption="This is my caption" 
   data-gallery="2"
   rel="light">
   <img src="thumb-2.jpg">
</a>

<a href="full-3.jpg" 
   data-caption="This is my caption" 
   data-gallery="3"
   rel="light">
   <img src="thumb-3.jpg">
</a>

4. Initialize the lightbox plugin on the image links. Done.

$(function() {
  $('a[rel=light]').light();
});

5. Customize the prev/next/loading/error text.

$(function() {
  $('a[rel=light]').light({
    prevText:'Previous',
    nextText:'Next',
    loadText:'Loading...',
    errorText:'Image not Found'
  });
});

6. Enable/disable the keyboard support. Default: true.

$(function() {
  $('a[rel=light]').light({
    keyboard: true
  });
});

7. Determine whether to disable the Click event on the element. Default: true.

$(function() {
  $('a[rel=light]').light({
    unbind: true
  });
});

---

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