Floom Slideshow MooTools Plugin

Floom slideshow is a MooTools plugin that can present images and photo captions pretty nice just auto-slides images. It displays them with a blind-effect and a chic loader that shows when the next image will be shown.

Floom is a lightweight just only 4kb compressed with very few features which is sometimes "what is needed".

SETTING IT UP

There are two ways of setting Floom up. One is the object way, where you specify the image url and the caption using the key-value notation.

var slides = [  {    image: 'photo-1.jpg',    caption: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit'  },  {    image: 'photo-2.jpg',    caption: 'Excepteur sint occaecat cupidatat non proident'  }]; $('blinds').floom(slides, {  axis: 'vertical'});

The second one is by simply passing a element collection, ie. $$('#blinds img'), where the passed element has to be the actual image collection. In this scenario the caption is the elements title attribute.

$('blinds').floom($$('#blinds img'), {  axis: 'vertical'});

OPTIONS

All options have default values assigned, hence are optional.

1.0

prefix: (str) class prefix for dynamically created elements. Defaults tofloom
amount: (int) amount of blinds. Defaults to 24
animation: (int) animation duration for each blind (slice). Defaults to 70
interval: (int) the interval between slide change. Defaults to 8000
axis: (str) either horizontal or vertical. Defaults to vertical
progressbar: (bool) show the progress bar. Defaults to true
captions: (bool) show the captions. Defaults to true
captionsFxIn: (obj) extend morph-in
captionsFxOut: (obj) extend morph-out
slidesBase: (str) the directory where to look for images/slides
sliceFxIn: (obj) extend morph-in
onSlideChange: fires on slide change
onPreload: fires on slides preload (once, on script initialization)
onFirst: fires when at the first slide
onLast: fires when at the last slide