Small Adaptive jQuery Gallery Lightbox Plugin - lightbox.js

Just another jQuery gallery lightbox plugin that images will open in a responsive lightbox popup with the ability to navigate through them with navigation arrows or arrow keys.

How to use it:

1. Insert jQuery library together with the jQuery lightbox.js plugin's JavaScript and CSS files into the webpage.

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

2. Initialize the lightbox plugin and we're ready to go.

new LightBox()

3. Create a single image lightbox using HTML5 data attributes as shown below:

<img src="thumb.jpg" class="js-lightbox" 
     data-role="lightbox" 
     data-source="large.jpg" 
     data-group="group" 
     data-id="1" 
     data-caption="Image Caption"
>

4. If you'd like to showcase multiple images in a same gallery lightbox:

<img src="thumb-1.jpg" class="js-lightbox" 
     data-role="lightbox" 
     data-source="large-1.jpg" 
     data-group="group" 
     data-id="1" 
     data-caption="Image Caption 1"
>

<img src="thumb-2.jpg" class="js-lightbox" 
     data-role="lightbox" 
     data-source="large-2.jpg" 
     data-group="group" 
     data-id="2" 
     data-caption="Image Caption 2"
>

<img src="thumb-3.jpg" class="js-lightbox" 
     data-role="lightbox" 
     data-source="large-3.jpg" 
     data-group="group" 
     data-id="3" 
     data-caption="Image Caption 3"
>

...

5. Override the default animation speed.

new LightBox({
    speed: 500
})

---

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