Responsive Content Lightbox with CSS3 Transitions - Olightbox

File Size: 37.4 KB
Views Total: 1202
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.


  • 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="//"></script>
<script src="olightbox.jquery.js"></script>

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

<a href="full.jpg" 
   <img src="thumb.jpg" alt="">

<a href="#" class="btn btn-danger"
   Content Lightbox

<div id="more">

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


4. Default options.


// 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

// Show the lightbox

// Remove the lightbox

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