Smooth Animated Lightbox Plugin For jQuery - lightninBox

lightninBox is a jQuery plugin for creating a responsive lightbox with smooth transitions to present your photos, image gallery and videos.

How to use it:

1. Include the JavaScript file jQuery.lightninBox.js after jQuery library and the stylesheet jQuery.lightninBox.css in the head section of your page.

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

2. Add a link pointing to your media file.

<a href="img.jpg" class="lightninBox"><img src="img.jpg"></a>
<a href="video.mp4" class="lightninBox"><img src="cover.jpg"></a>

3. You can also create a gallery lightbox by using data-lb-group attribute to group your images.

<a href="1.jpg" class="lightninBox" data-lb-group="1"><img src="1.jpg"></a>
<a href="2.jpg" class="lightninBox" data-lb-group="1"><img src="2.jpg"></a>
<a href="3.jpg" class="lightninBox" data-lb-group="1"><img src="3.jpg"></a>

4. Initialize the plugin by calling the function on the links.

$(".lightninBox").lightninBox();

5. Possible options.

$(".lightninBox").lightninBox({

// paddding & margin
padding: 20,
margin: 20,

// enable gallery mode
gallery: true,

// loader GIF
loaderSource: 'img/loader.gif'

});

---

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