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.12 β

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 blackboxClass($$('#myBlackcubeSlideShow'), { wait: 3000, height: 350 });

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

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. Please note that you can only use the $$ function. The $ function won’t work!

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!