Cl.Gallery¶
This is a list of all relevant options, methods, events and callbacks.
Options¶
Options are set on initializing the gallery:
new Cl.Gallery({
// your options
'index': 0,
'engine': 'slide'
});
| Option | Default | Description |
|---|---|---|
| index | null | shows selected element[index]/group[index] starting form zero. |
| timeout | 5000 | timeout in ms for autoplay, if 0 or null autoplay is ignored. |
| autoplay | false | continues timeout even after manual cancellation. |
| easing | ‘swing’ | the jquery easing method for all animations. |
| duration | 300 | the jquery duration speed for all animations. |
| autoHeight | true | sets the height on the warpper to the heighest element. |
| autoResize | true | sets the height on the warpper on window.resize. |
| engine | ‘fade’ | this is the engine to be loaded when animating. Build-in are fade and slide. |
| cls | object | the available css class getters and setters. |
Option cls setters and getters:
| Option | Default | Description |
|---|---|---|
| active | ‘active’ | class will be added to the active item. |
| wrapper | ‘.wrapper’ | the outer relative positioned wrapper where the height will be added. |
| viewport | ‘.viewport’ | the inner absolute positioned wrapper that will be moved. |
| elements | ‘.item’ | the element / individual items. |
| next | ‘.trigger-next a’ | element which triggers the method next. |
| previous | ‘.trigger-previous a’ | element which triggers the method previous. |
| navigation | ‘.nav a’ | navigation elements which trigger the method move whith their corresponding index. |
Methods¶
Methods can be called using an instance of the class:
var gallery = new Cl.Gallery();
// trigger the instanace
gallery.toggle();
All Methods have appropriate events and callbacks.
- gallery.next()¶
Description: goes to the next gallery slide. Returns: next callback.
- gallery.previous()¶
Description: goes to the previous gallery slide. Returns: previous callback.
- gallery.move(index)¶
Description: moves to a gallery entry.
Arguments: - index (number) – index of the element to be moved to.
Returns: move callback.
- gallery.play()¶
Description: starts the gallery timeout. Returns: play callback.
- gallery.stop()¶
Description: stops the gallery timeout. Returns: stop callback.
- gallery.update()¶
Description: updates gallery to current index. Returns: update callback.
Callbacks¶
Callbacks are always triggered after the method is excecuted. You can interact with callbacks as follows:
var gallery = new Cl.Gallery();
// register callback
gallery.callbacks.move = function (scope) {
console.log('galery is moving to element ' + scope.index);
};
Available keywords: