This is a list of all relevant options, methods, events and callbacks.


Options are set on initializing the lightbox:

new Cl.Lightbox({
    'group': false,
    'responsive': false
Option Default Description
prefix ‘cl’ the prefix is attached to all internal events and css classes for example cl-lightbox or cl-lightbox.
group true allows grouping of matching elements and enables status and navigation.
cycle true requires group allows previous and next methods to cycle through matching elements.
modal true enables the dimmer functionality.
modalClickable true requires modal allows the dimmer to be closed onclick.
modalClosable true requires modalClickable disables all close events, lightbox can be only closed using the API.
forceLoad false if enabled, insures that iframes are fully loaded before display.
easing ‘swing’ jquery easing effect for all animations.
duration 300 duration until the lightbox is fully expanded.
speed 300 speed for all regular animations.
fixed true sets the lightbox always inside the viewport of the user even when scrolling.
responsive true enables responsive behaviour of the lightbox.
ajax false ajax loads the provided url and tries to inject the html into the lightbox. It does not create an iframe in order to maintain the css style.
controls true requires group enables controllable elements when a collection is active.
cls ‘’ adds an additional class to the top level element.
opacity 0.8 ``requires modal``transparent level for dimmer.
styles Object adds jquery style css object to gallery content element.
dimensions Object available dimensions are initialWidth, initialHeight, offset, width and height.
keys true enables control for the lightbox using the keyboard.
keyCodes Object requires keys enables key control for close, next and previous.
lang Object the available language configurations.

Option lang strings:

Option Default
close ‘Close lightbox’
errorMessage ‘<p><strong>The requested element...</p>’
next ‘Next’
previous ‘Previous’
status ‘Slide {current} of {total}.’


Methods can be called using an instance of the class:

var lightbox = new Cl.Lightbox();
    // trigger the instanace;

All Methods have appropriate events and callbacks.

opens the lightbox with the provided url or jQuery element.

  • type (jquery) – either url or jQuery element.

open callback

Description:closes the lightbox.
Returns:close callback
instance.resize(width, height)

resizes the lightbox to the specified dimensions.

  • width (number) – the width the lightbox should be resized to.
  • height (number) – the height the lightbox should be resized to.

resize callback

Description:removes the lightbox from the dom.
Returns:destroy callback
Description:movies to the next element.
Returns:next callback
Description:movies to the previous element.
Returns:previous callback
Returns:the current visible element
Returns:all current elements in the collection


Callbacks are always triggered after the method is excecuted. You can interact with callbacks as follows:

var lightbox = new Cl.Lightbox();
// register callback
lightbox.callbacks.close = function () {
    console.log('lightbox is closing');

Available keywords:

is called when triggering method ``open``.
is called when triggering method ``close``.
is called when triggering method ``resize``.
is called when triggering method ``destroy``.
is called when triggering method ``next``.
is called when triggering method ``previous``.

Private keywords:

is called when triggering private method ``load``.
is called when triggering private method ``complete``.
is called when triggering private method ``unload``.