blackbox // lab111

blackbox

blackbox is an unobtrusive, in MooTools written JavaScript class that turns a simple unordered image list into a magnificent slideshow. (All with the fade in and fade out effects!) Please note that this script is still in beta and contains therefore some annoying bugs…

Download ↓
Demo ↓

Demo

Photos from my Flickr

License

blackbox is licensed under a MIT License.

Downloads

Alpha, Beta, Gamma... Attention, radioactive!

This script is still in beta.

blackbox requires the ultrasmall JavaScript library Mootools (v1.2). It doesn’t require any other Plugins.

Download blackbox v0.15 β

Setting up

Setting up blackbox is very simple. You just need to include the two JavaScript files in your <header> like this:

<script src="mootools.js" type="text/javascript"></script>
<script src="blackbox.js" type="text/javascript"></script>

Usage

To make a slideshow, just create a simple unordered list as the container with an individual id.

<ul id="myBlackcubeSlideShow">
    <li><img src="photo1.jpg" alt="Foto 1" /></li>
    <li><img src="photo2.jpg" alt="Foto 2" /></li>
    <li><img src="photo3.jpg" alt="Foto 3" /></li>
</ul>

To start the slideshow just add the container(s) and a hash of options to a new instance of the class:

var mySlideshow = new Blackbox('myBlackcubeSlideShow', { wait: 3000, height: 350 });

Et voilà: You’ve just created your first blackbox slideshow!

Update notice: You may have noticed that the name of the class has changed from blackboxClass to Blackbox and that the first argument does not accept arrays anymore.

Like I said before, this script is beta and you have to specify the height option of the blackbox class. Otherwise, it’ll just take the default value: 200px.

You can get the Blackbox class by property Element.Properties.blackbox:

$('myBlackcubeSlideShow').get('blackbox').stop();

Psst: You don’t have to list images… It works with anything you put in the <li> element, as long as you specify the height!

Options

bgcolor: The background color of the slideshow (default: #000)
duration: The duration of the effect in milliseconds (default: 500)
height: The height of each slide in pixel (default: 200)
pause: Determines if the slideshow should start right away or triggered through Blackbox::start() (default: false)
start: The first slide to display (default: 1)
wait: The length of each slide in milliseconds (default: 5000)

Methods

start(): Starts the slideshow
stop(): Stops the slideshow

Example: Stop slideshow if mouse is hovered over it

$(slideshow).addEvents({
    mouseover: function() {
        $(slideshow).get('blackbox').stop();
    },
    mouseout: function() {
        $(slideshow).get('blackbox').start();
    }
});

Changelog

Version 0.15 (1th April, 2009)

Added stop & resume functionality
Added property blackbox to Element

Version 0.12

Compatible with the new Mootools v1.2

Version 0.11

Release

lab111

Navigation