CORE
NATIVE
TABLE
MAKE
CUSTOMIZE
EFFECTS
effects_base.js
effects_morph.js
effects_fade.js
effects_move.js
effects_extra.js
effects_toggle.js
effects_cycle.js
effects_cycles.js
VIRTUAL BOX
PLUG-IN
glider.js
Contains the Glider Class for making fully-customizable slidewshows based on scroll effects
Contains
Class Glider
Requires
Summary
| Glider | A powerful Class which allows you to create modal fully-customizable slidewshows |
The Glider Class allows you to create powerful and fully-customizable slideshows.You can set whatever you want: captions, thumbnails, arrows, keyboard arrows listeners,effects (fade and height transitions) scroll and morph options, whether enable the autostart or not,whether enable the autoresize (height and/or with) or not and many, many more.In addiction you can enable the full-screen mode, which is perfect for presentations.
Implements
Overlay, Options, Events
Constructor
new Glider (element, options)
Properties
| element | the element which contains the glider (an 'ul' element) | |
| options | optional. an object which permits to customize the glider |
Options
| enable | an object which allows to decide which parameters and features the glider must have (see below) | |
| steps | the timer used by autostart to change periodically the slides. Default is 3000 ms | |
| mode | the mode of the glider. Can be 'scroll' or 'fix' | |
| captions | an array of captions contents | |
| captionWrapper | the id of the caption wrapper | |
| captionFadeEffect | if true the fade effect of the captions will be enabled | |
| captionHeightEffect | if true the height effect of the captions will be enabled | |
| scrollOptions | an object which represents the scroll options applied when mode is set to 'scroll' | |
| morphOptions | an object which represents the morph options for the caption effect | |
| thumbnailsWrapper | the id of the thumbnails wrapper | |
| thumbTexts | an array of thumbnails contents | |
| toNormalButtonClass | the class name of the button which closes the full-screen mode | |
| toNormalButtonText | the html content of the which closes the full-screen mode | |
| toNormalButtonType | the tag name of this button. Can be 'a' (default) or 'li'. | |
| toFullScreenButtonClass | the class name of the button which enables the full-screen mode | |
| toFullScreenButtonText | the html content of the which enables the full-screen mode | |
| toFullScreenButtonType | the tag name of this button. Can be 'a' (default) or 'li'. |
enable:
-
resizeHeight: if true the glider will auto-resize the element height -
resizeWidth: if true the glider will auto-resize the element width . Default is false -
preloader: if true the preloader will be started -
captions: if true the captions will be enabled -
thumbnails: if true the thumbnails will be enabled. Default is false -
arrows: if true the arrows will be enabled. Default is false -
arrowsLimits: if true the left and right limit arrows will be enable. Default is false. -
arrowsKeyboard: if true you can change the slide with the keyboard arrows. Default is false -
autostart: if true the slides will be changed automatically. Deafult is false -
fullscreen: if true if you press shift+f the glider will enter into 'full-screen mode' -
toNormalButton: if true a button to come back to the normal mode will be added into full-screen mode
Note
If the tag name of the normal button or the full-screen button is set to 'a', the buttonwill be placed into the thumbnails wrapper as link. Otherwise if it's set to 'li' it will be placedas a list item (always the last) into the list which contains thumbnails and/or arrows.
Events
| onFullScreen | function fired when the full-screen mode is enabled | |
| onNormalScreen | function fired when the normal-screen mode is enabled | |
| onNext | function fired when the next slide comes in. The silde number and the total length will be passed as arguments. | |
| onPrev | function fired when the previous slide comes in. The slide number and the total length will be passed as arguments. | |
| onGoTo | function fired when a specified silde comes in. The slide number and the total length will be passed as arguments. | |
| onFirst | function fired when the first silde comes in. The slide number and the total length will be passed as arguments. | |
| onLast | function fired when the last silde comes in. The slide number and the total length will be passed as arguments. |
Methods
| next | switchs to the next slide | |
| prev | switchs to the previous slide | |
| goTo | switchs to the given slide | |
| toFirst | switchs to the first slide | |
| toLast | switchs to the last slide | |
| start | enables the autostart and starts the slideshow | |
| stop | stops the slideshow | |
| toFullScreenMode | makes the glider enter into the full-screen mode (also available by pressing shift+f) | |
| toNormalScreenMode | disables the full-screen mode and comes back to the normal mode | |
| setMode | sets the mode of the glider which means how slides come in. Can be 'scroll' (default) or 'fix' | |
| setIDs | sets the id property for each section passed in |
top method next
switches to the next slide
Example
// go to the next slide glider.next();
top method prev
switches to the previous slide
Example
// go to the previous slide glider.prev();
top method goTo
switches to the given slide
Arguments
| where | the number of the slide |
Example
// go to the second slide glider.goTo(2);
top method toFirst
switches to the first slide
Example
// go to the first slide glider.toFirst();
top method toLast
switches to the last slide
Example
// go to the last slide glider.toLast();
top method start
enables the autostart and starts the slideshow
Example
glider.start();
top method stop
stops the slideshow
Example
glider.stop();
top method toFullScreenMode
makes the glider enter into the full-screen mode (also available by pressing shift+f)
Example
// enter into the full-screen mode glider.toFullScreenMode();
top method toNormalScreenMode
disables the full-screen mode and comes back to the normal mode
Example
// come back to the normal mode glider.toNormalScreenMode();
top method setIDs
sets the id property for each section passed in
Arguments
| names | an object with key/value pairs which represents the glider zones and their new values |
Example
glider.setIDs({ leftArrow: 'newLeftArrow', rightArrow: 'newRightArrow' });
top method setMode
sets the mode of the glider which means how slides come in. Can be 'scroll' (default) or 'fix'
Arguments
| mode | the mode of the glider. Can be 'scroll' or 'fix' |
Example
// set the 'fix' mode glider.setMode('fix'); // now set the 'scroll' mode glider.setMode('scroll');
Documentation By
Riccardo Degni -
powered by MakeDocs, CMS by RD
The moo.rd documentation is released under the
Creative Commons BY-NC SA License
