glider.js
Contains Class Glider
Requires Summary Glider | | A powerful Class which allows you to create modal fully-customizable slidewshows |
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 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');
Implements [Overlay, Options, Events],
Documentation By
Riccardo Degni -
powered by MakeDocs, CMS by RD
The moo.rd documentation is released under the
Creative Commons BY-NC SA License
|