Mobile-friendly Galley Lightbox Plugin For jQuery

A lightweight, responsive, mobile-friendly jQuery lightbox & gallery plugin where the images will be opened in a lightbox popup with the ability to fade through all images just like a carousel.

How to use it:

1. Load jQuery library and the lightbox plugin's JavaScript & CSS files in the html document.

<link href="css/lightbox.css" rel="stylesheet">
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/jquery-lightbox.min.js"></script>

2. Make sure the anchor links pointing to the large images have the same CSS class:

<a href="1.jpg" class="lightBox">
  <img src="thumb-1.jpg" alt="Image 1">
</a>

<a href="2.jpg" class="lightBox">
  <img src="thumb-2.jpg" alt="Image 2">
</a>

<a href="3.jpg" class="lightBox">
  <img src="thumb-3.jpg" alt="Image 3">
</a>

<a href="4.jpg" class="lightBox">
  <img src="thumb-4.jpg" alt="Image 4">
</a>

<a href="5.jpg" class="lightBox">
  <img src="thumb-5.jpg" alt="Image 5">
</a>

...

3. Initialize the lightbox plugin on document ready and you're done.

$(document).ready(function(){
  $('.lightBox').lightBox();
});

4. To add a caption bar below the image:

<a href="sample.jpg" class="lightBox" title="Caption Here">
  <img src="sample-thumb.jpg" alt="Image Alt">
</a>

---

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