Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/johannesfischer/nivoo-slider
MooTools-port of the jQuery plugin Nivo Slider (http://nivo.dev7studios.com/)
https://github.com/johannesfischer/nivoo-slider
Last synced: about 1 month ago
JSON representation
MooTools-port of the jQuery plugin Nivo Slider (http://nivo.dev7studios.com/)
- Host: GitHub
- URL: https://github.com/johannesfischer/nivoo-slider
- Owner: JohannesFischer
- License: mit
- Created: 2010-03-28T16:09:22.000Z (over 14 years ago)
- Default Branch: master
- Last Pushed: 2015-04-17T02:33:20.000Z (over 9 years ago)
- Last Synced: 2023-03-10T20:04:50.246Z (almost 2 years ago)
- Language: JavaScript
- Homepage: http://www.johannes-fischer.de/labs/nivoo-slider/
- Size: 699 KB
- Stars: 23
- Watchers: 4
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: license.txt
Awesome Lists containing this project
README
# Nivoo-Slider #
The Nivoo-Slider is an image gallery based on the jQuery Plugin NivoSlider (http://nivo.dev7studios.com/). It features 18 different transition effects.
## How to use ##
Just include NivooSider.js and the NivooSlider.css to your the head section of your HTML file:
And the gallery structure:
And then initialize the slider using the domready event:
window.addEvent('domready', function () {
// The simple way
new NivooSlider($('Slider'));
// The more advanced way
new NivooSlider($('Slider'), {
animSpeed: 750,
effect: 'sliceLeftRightDown',
interval: 5000,
orientation: 'horizontal',
slices: 20
}).addEvents({
'onFinish': function () {
// fired after each transition
},
'onLastSlide': function () {
// fired when the last slide comes on
},
'onStart': function () {
// fired right before each transition
}
});
// add an if statement to check for the slider element (e.g. in a global script)
// in this way you can add the code even if the slider element doesn't exist on the current page
if ($('Slider')) {
new NivooSlider($('Slider'));
}
}
## Documentation ##
### Class: NivooSlider ###
##### Syntax #####
var slider = new NivooSlider(element[, options]);
###### Arguments ######
1. element - (mixed) An Element or the string id of an Element to apply the gallery to.
2. options - (object, optional) The Nivoo-Slider options object, described below:
###### Options ######
- animSpeed - (number: defaults to 500) The time (duration) in ms of the transition
- autoPlay - (bool: defaults to true) Start the transition automatically after initializing
- controlNav: (bool: defauls to true) Add a control navigation (bullet points) below the slider
- controlNavItem: (string: defauls to disc) Sets the character used in the control navigation, can be disc, decimal, or any other string / html entity
- directionNav -(bool: deafults to true) Shows controls to go back and forth
- directionNavHide - (bool: defaults to false) Hides the navigation controls on mouseout, so they are only visible when the mouse cursor is over the slider element
- directionNavPosition -(string: deafult is inside) Place of the directional navigation, can be inside or outside. When positioned outside the css-class direction-nav-outside will be added to the slider-container
- directionNavWidth - (number,string: defaults to 20%) Width of the clickable area of the directional navigation. Can be a number for pixels or a string with a percentage of the full width.
- effect - (string: defaults to sliceDown) Type of transition (see effects),
- interval - (number: defaults to 3000) Interval in ms between the transitions, required for the autoPlay function
- orientation - (string: defaults to vertical) Defines the direction of the transition, can be horizontal, random or vertical
- pauseOnBlur - (bool: defaults to false) Pauses the Animation when the window is not focused
- pauseOnHover - (bool: defaults to true) Clears the interval on mouseover
- slices - (number: defaults to 15) Number of the slices used for the transitions
###### Events ######
- finish - (function) Is fired right after each transition
- lastSlide - (function) Is fired when the last slide comes on
- start - (function) Is fired right before each transition
#### Effects ####
###### horizontal & vertical ######
- fade
- fold
- random
###### horizontal ######
- sliceLeftDown
- sliceLeftUp
- sliceLeftRightDown
- sliceLeftRightUp
- sliceRightDown
- sliceRightUp
- wipeDown
- wipeUp
###### vertical ######
- sliceDownLeft
- sliceDownRight
- sliceUpDownLeft
- sliceUpDownRight
- sliceUpLeft
- sliceUpRight
- wipeLeft
- wipeRight
## License ##
MIT-style license.