Responsive Content Lightbox with CSS3 Transitions - Olightbox

Olightbox is a jQuery plugin that allows you to embed images or inline content into a responsive lightbox popup with CSS3 powered transition effects.

Features:

• Animated content loading indicator.
• ESC key or click anywhere on the blank background to close.
• 3 built-in CSS3 transition animations.
• Custom error message.

Basic usage:

1. Include jQuery library and the jQuery Olightbox plugin's files in your project.

<link href="olightbox.jquery.css" rel="stylesheet">

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="olightbox.jquery.js"></script>

2. Adding the data-toggle="olightbox" attribute to auto trigger the lightbox.

<a href="full.jpg" 
   data-toggle="olightbox">
   <img src="thumb.jpg" alt="">
</a>

<a href="#" class="btn btn-danger"
   data-toggle="olightbox"
   data-target="#more">
   Content Lightbox
</a>

<div id="more">
  ...
</div>

3. You can also trigger the lightbox with configuration options as follow.

$(".olightbox").olightbox(options);

4. Default options.

$(".olightbox").olightbox({

// transition type: fadeIn, slide, show, etc
'transition'  : 'fadeIn',

// animation speed
'transitionSpeed': 500,

// custom trigger event
// hover, click, etc
'trigger'   : 'click',

// show box directly on trigger
'show'      : true,

//  cusotm error message
'errorMessage'  : "Error!<br>Content not found.",

// CSS classes
'elements'    : {
'overlay' : {
  'className' : "olightbox-overlay"
},
'wrapper' : {
  'className' : "olightbox-wrapper"
},
'contentWrapper' : {
  'className' : 'olightbox-content-wrapper'
},
'loader' : {
  'className' : 'olightbox-loader'
},
'error' : {
  'className' : 'olightbox-error'
}
}

});

5. Methods.

// Prepare all the needed elements
$(".olightbox").olightbox("prepare");

// Show the lightbox
$(".olightbox").olightbox('show');

// Remove the lightbox
$(".olightbox").olightbox('remove');

---

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