Lumens Lightbox

Basic Lightbox

This is a basic Lightbox with no options passed.

It can contain everything you can place in HTML such as Iframes, Images, Videos or just plain Text

The lightbox can be closed by clicking outside, pressing the escape key or clicking the X in the top right. All those options can be individually configured

var box = new Lightbox();
box.setTitle('Basic Lightbox');
box.setContent('The content');
box.open();

Uncloseable Lightbox

This box cannot be closed, except with this custom made close button

var box = new Lightbox({
 closeable: false
});

closeButton.onclick = function(){
 box.close();
}

Animated Lightbox

This Lightbox has different opening and closing animations

It uses 'jelly' to open and 'collapse' to close, but there are several more.

var box = new Lightbox({
 openAnimation: 'jelly',
 closeAnimation: 'collapse'
})

Draggable Lightbox

This Lightbox can be dragged around by grabbing the titlebar

If you drag it outside of the pagebounds and let go, it will snap back

With this option enabled, the user can no longer select the text in the title of the lightbox.

var box = new Lightbox({
 draggable: true
});

Callback Lightbox

Stacked lightbox

We need to go deeper Leo!

Another stacked lightbox

There we go!