Cl.Lightbox

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

Options

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

Methods can be called using an instance of the class:

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

All Methods have appropriate events and callbacks.

instance.open(url)
Description:

opens the lightbox with the provided url or jQuery element.

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

open callback

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

resizes the lightbox to the specified dimensions.

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

resize callback

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

Callbacks

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:

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

Private keywords:

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