NivooSlider

The Nivoo-Slider is an image gallery running on Mootools, it started as a port of the jQuery Plugin NivoSlider. It currently features 18 different transition effects.

Repository hosted on github

please report issues here

Download source »

Demo

Check out some Demos here

Demo

How to use

Just include MootTools (1.2.*) NivooSider.js and the NivooSlider.css to your HTML:

#HTML
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="NivooSlider.js"></script> <link  href="NivooSlider.css" rel="stylesheet" media="screen">

And the gallery structure:

#HTML
<div id="Slider" class="nivoo-slider"> 
<img src="images/image1.jpg" alt="" title="insert text to display a caption">    <a href="#hyperlink">
    <img src="images/iamge2.jpg" alt="" title="This image is linked to a great website">    </a>
   <img src="images/image3.jpg" alt=""> </div>

And then initialize the slider using the domready event:

#JS
window.addEvent('domready', function () {
// The simple way
  new NivooSlider(document.id('YourSliderID'));
// The more advanced way
  new NivooSlider(document.id('YourSliderID'), {    animSpeed: 750,        effect: 'sliceLeftRightDown',    interval: 5000,
       orientation: 'horizontal',
       slices: 20
   }).addEvents({ 'onFinish': function () {       // fired after each transition
    },
    'onStart': function () {
// fired right before each transition } }); });

Documentation Class: NivooSlider

Syntax
#JS
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:  
    • animSpeed - (number: defaults to 500) The time (duration) in ms of the transition
    • autoPlay - (bool: defaults to true) Start the transition automatically after initializing
    • cssClass - (string, defaults to nivooSlider) Name of the css class that is added after initializing the slider
    • 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
    • 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 or vertical
    • pauseOnHover - (bool: defaults to true) Clears the interval on mouseover
    • slices - (number: defaults to 15) Number of the slices used for the transition

Events

  • start - (function) Is fired right before each transition
  • finish - (function) Is fired right after each transition

Effects

both 
  • fade
  • fold
  • random 
horizontal
  • sliceLeftDown
  • sliceLeftUp
  • sliceLeftRightDown
  • sliceLeftRightUp
  • sliceRightDown
  • sliceRightUp
  • wipeDown
  • wipeUp
vertical
  • sliceDownLeft
  • sliceDownRight
  • sliceUpDownLeft
  • sliceUpDownRight
  • sliceUpLeft
  • sliceUpRight
  • wipeLeft
  • wipeRight

Coming Features

preloading images, centered images

License

MIT-style license .

Kommentieren

Kommentare

Noch keine Kommentare auf diese Seite.

RSS Feed für Kommentare auf dieser Seite | RSS Feed für alle Kommentare