Submit your widget

An elegant, lightweight slideshow script(mootools)

Created 8 years ago   Views 22514   downloads 3884    Author n/a
An elegant, lightweight slideshow script(mootools)
View DemoDownload 245.9 KB
134
Share |

BarackSlideshow is a very tiny and lightweight slideshow script, that takes the power of MorphList to enhance visualization and navigation of the images .

 

With a markup like this:

<div id="slideshow">    
  <span id="loading">Loading</span>
 
  <ul id="pictures">
    <li><img src="../Source/images/cities/melbourne.jpg" alt="Melbourne" title="Melbourne" /></li>
    <li><img src="../Source/images/cities/buenos_aires.jpg" alt="Buenos Aires" title="Buenos Aires" /></li>
    <li><img src="../Source/images/cities/urubamba.jpg" alt="Urubamba" title="Urubamba" /></li>
  </ul>
 
  <ul id="menu">
    <li><a href="../Source/images/cities/melbourne.jpg">Melbourne</a></li>
    <li><a href="../Source/images/cities/buenos_aires.jpg">Buenos Aires</a></li>
    <li><a href="../Source/images/cities/urubamba.jpg">Urubamba</a></li>
  </ul>
</div>

 

BarackSlideshow is initialized as follows:

window.addEvent('domready', function(){
    new BarackSlideshow('menu', 'pictures', 'loading', {transition: 'slide-left', auto: true});
});

 

Options

  • transition (defaults to ‘fade’) Can be ’slide-left’, ’slide-right’, ’slide-top’, ’slide-bottom’, ‘fade’
  • auto (defaults to false) Whether to move from image to image automatically
  • autostart (defaults to false) Whether to start slideshow automatically upon initialization
  • autointerval (defaults to 2000) Interval time from image to image in ms
  • tween (defaults to {duration: 700}) Options to pass to MooTools Fx.Tween, which takes care of image transitions.