14 January 2010 Thursday

This application was viewed 1845 times

0

Vote for this application

Share|

BarackSlideshow

a very tiny and lightweight slideslow script, inspired by the slideshow in Barack Obama website. The script takes the power of MorphList to enhance visualization and navigation of the images.

View the 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

Tags: image, pretty photo, jquery, lightbox,