Lightweight Responsive jQuery & CSS3 Modal Plugin - LiteBox

LiteBox is a jQuery & CSS3 based lightbox plugin that displays any Html content in a responsive fullscreen modal window.

Features:

• Responsive design that adapts to any screen sizes.
• Fullscreen overlay.
• Displays a gallery in a lightbox with navigation.
• Auto detects Html content.
• Supports any Html content like images, videos, iframes, inner html, etc.
• Has an image loader with images-loaded..js

How to use it:

1. Include the required JQuery Litebox plugin's CSS into the head section.

<link href="assets/css/litebox.css" rel="stylesheet" type="text/css" media="all" />

2. Include the jQuery javascript library and the JQuery Litebox plugin's Javascript at the end of the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="assets/js/litebox.js" type="text/javascript"></script>

3. Include the images-loaded.min.js to detect if an image has been loaded.

<script src="assets/js/images-loaded.min.js" type="text/javascript"></script>

4. Create a lightbox gallery following the Html structure like this. Make sure the links have the same data-litebox-group attribute.

<a href="001.jpg" target="_self" class="litebox" data-litebox-group="group-1"><img src="001-thumb.jpg" /></a>
<a href="002.jpg" target="_self" class="litebox" data-litebox-group="group-1"><img src="002-thumb.jpg" /></a>
<a href="003.jpg" target="_self" class="litebox" data-litebox-group="group-1"><img src="003-thumb.jpg" /></a>

5. To initialize the plugin just call the function on the elements with CSS class of '.litebox'

$('.litebox').liteBox();

6. Options and defaults.

revealSpeed: 400,
background: 'rgba(0,0,0,.8)',
overlayClose: true,
escKey: true,
navKey: true,
callbackInit: function() {},
callbackBeforeOpen: function() {},
callbackAfterOpen: function() {},
callbackBeforeClose: function() {},
callbackAfterClose: function() {},
callbackError: function() {},
callbackPrev: function() {},
callbackNext: function() {},
errorMessage: 'Error loading content.'

---

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