Basic Responsive jQuery Image Lightbox Plugin - Litebox

Litebox is a basic, lightweight, responsive jQuery lightbox plugin used to overlay images on top of the current webpage.

How to use it:

1. Load the jQuery litebox plugin at the bottom of your webpage but after jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery.litebox.1.0.js"></script>

2. Create a link with the data-litebox="litebox" attribute and use href attribute to specify the image source you wish to display in the lightbox.

<a data-litebox="litebox" href="1.jpg">Click me</a>

3. Call the function to enable the lightbox plugin.

$('[data-litebox="litebox"]').litebox();

4. The required CSS styles for the lightbox plugin.

[data-overlay="litebox"] {
 position: fixed;
 top:0;
 left:0;
 width:100%;
 height:100%;
 background-color:#000;
 background-color: rgba(0,0,0, 0.8);
 text-align: center;
}

5. Add a subtle transition effect to the lightbox.

$('[data-litebox="litebox"]').litebox({

// animation speed
speed: 500,

// animation type
animation: 'swing'

});

---

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