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:
Private keywords: