BarackSlideshow

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

Demo

How to use

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.

Changelog

  • 0.1: First release
  • 0.2:
    • Added ‘transition’ option. Can be slide-(bottom|top|left|right) or fade, or a function that returns any of those values
    • Added ‘tween’ to options to customize the transition effect
    • BarackSlideshow::show now also alters the menu state
    • Other tiny changes
  • 0.3: Integrated with the updated Fx.MorphList