Simple jQuery Any Content Lightbox Plugin - jLightbox

jLightbox is a fresh new jQuery plugin that allows you to display any Html contents in a responsive lightbox/modal window with a fancy popup animation.

Features:

• Supports images, inline elements, youtube/vimoe videos and more.
• Responsive design. The lightbox will auto resize as the window's size changes.
• Easing effects with jQuery easing plugin.
• Gallery lightbox support. You can navigate through a group of Html contents without opening a new lightbox.
• Keyboard navigation support.

How to use it:

1. Include the jQuery jLightbox plugin's stylesheet in the head section of the page.

<link rel="stylesheet" href="assets/css/jlightbox.jquery.css">

2. Insert a group of images in the page. If you'd like to display them as an image gallery in a lightbox, make sure to set the rel attribute to have the same value.

<a href="1.jpg" class="jlightbox" rel="galeriaimages">Image 1</a>
<a href="2.jpg" class="jlightbox" rel="galeriaimages">Image 2</a>
<a href="3.jpg" class="jlightbox" rel="galeriaimages">Image 3</a>

3. Include necessary javascript files at the bottom of the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="assets/js/jlightbox.jquery.js"></script>
<script src="assets/js/jquery.easing.1.3.js"></script>

4. Enable the lightbox.

$(document).ready(function(){
$('a.jlightbox').jlightbox();
});

5. Available options to customize the lightbox.

$(document).ready(function(){
$('a.jlightbox').jlightbox({
width: 500,
height: 344,
img_loading: 'assets/img/loading.gif',
btn_close: true,
pagination: true,
height_controls: 60,
keyboard_shortcuts: true,
end_cycle: true,
modal: true,
onInit: function(){},
onLoad: function(){},
onOpen: function(){},
onOpenComplete: function(){},
onContentLoaded: function(){},
onPageChanged: function(){}
});
});

---

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