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: