Floom 1.1 with controls

Floom 1.1 (extended example). More at: http://nouincolor.com/floom/1.1/Demos/

by Oski Krawczyk

HTML

<script src="http://github.com/oskarkrawczyk/floom/raw/master/Source/floom.js"></script>
<link rel="stylesheet" href="http://github.com/oskarkrawczyk/floom/raw/master/Demos/screen.css">
<a id="floom_prev" href="#">prev</a> | <a id="floom_next" href="#">next</a>
<div id="blinds-cont">
    <div id="blinds">
    </div>
</div>

CSS

#blinds-cont {
    height: 500px;
    width: 432px;
    margin: 0 auto;
}

#blinds {
    height: 500px;
    width: 432px;
    background: url(http://github.com/oskarkrawczyk/floom/raw/master/Demos/floom/spinner.gif) 50% no-repeat;
}

.floom_container {
    overflow: hidden;
}

.floom_progressbar {
    height: 6px;
    background: #ccc;
    width: 0;
    position: relative;
    top: 6px;
    z-index: 1000;
    font-size: 1px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
}

.floom_slice {
    z-index: 10;
}

    
.floom_vertical {
    float: left;
}

.floom_horizontal {
    
}

.floom_caption {
    width: 100%;
    position: relative;
    top: 25px;
    text-align: center;
    font-size: 1.0em;
    color: #333;
    text-shadow: 0 1px 0 #fff;
    font-style: italic;
}

JavaScript

/*
---
script: floom.controls.js
...
*/

Floom = Class.refactor(Floom, {
    onPreload: function(){
        var self = this;
        
        this.animateBlinds(this.options.interval, this);
        
        $(this.options.navigators[0]).addEvents({
            click: function(e){
                e.stop();
                
                if (self.current.slide > 0){
                    self.current.slide = self.current.slide-2;
                    self.animateBlinds(self.options.interval, self);
                }
            }
        });
        
        $(this.options.navigators[1]).addEvents({
            click: function(e){
                e.stop();
                
                if (self.current.slide != self.slides.length-1){
                    self.animateBlinds(self.options.interval, self);
                }
            }
        });
        
        this.fireEvent('onPreload', this.slides[this.current.slide]);
    }
});

var slides = [
    {
        image: 'http://farm3.static.flickr.com/2453/3790997421_f5e97fcacb.jpg'
    },
    {
        image: 'http://farm3.static.flickr.com/2497/3790997447_5f775746fd.jpg'
    },
    {
        image: 'http://farm3.static.flickr.com/2652/3791811230_b062bb0100.jpg'
    },
    {
        image: 'http://farm3.static.flickr.com/2581/3790997277_7306bf4e46.jpg'
    },
    {
        image: 'http://farm3.static.flickr.com/2461/3791811152_cd491a64f3.jpg'
    },
    {
        image: 'http://farm3.static.flickr.com/2497/3790997447_5f775746fd.jpg'
    },
    {
        image: 'http://farm4.static.flickr.com/3615/3693970776_30c78de11d.jpg'
    },
    {
        image: 'http://farm3.static.flickr.com/2647/3693165823_9063e885af.jpg'
    },
    {
        image: 'http://farm4.static.flickr.com/3389/3661748857_d4de9589fb.jpg'
    },
    {
        image: 'http://farm4.static.flickr.com/3606/3661748861_77d6290783.jpg'
    }
];

$('blinds').floom(slides, {
    sliceFxIn: {
        top: 20
    },
    progressbar: false,
    navigators:...