Mobile-friendly Galley Lightbox Plugin For jQuery

File Size: 17.9 KB
Views Total: 3555
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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 href="2.jpg" class="lightBox">
  <img src="thumb-2.jpg" alt="Image 2">

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

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

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


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


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">

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