ImageFlow

by Reusablecode

HTML

<a class="ifNav" href="#previous">Previous</a> | <a class="ifNav" href="#next">Next</a>

<div id="image-flow">
    <ul>
        <li class="active"><img src="http://dummyimage.com/260x200/008833/fff.png" /></li>
        <li><img src="http://dummyimage.com/140x200/008833/fff.png" /></li>
        <li><img src="http://dummyimage.com/200x200/008833/fff.png" /></li>
        <li><img src="http://dummyimage.com/120x200/008833/fff.png" /></li>
        <li><img src="http://dummyimage.com/280x200/008833/fff.png" /></li>
        <li><img src="http://dummyimage.com/100x200/008833/fff.png" /></li>
    </ul>
</div>

CSS

#image-flow {
    padding: 15px 0;
    width: 500px;
    overflow: hidden;
    border: solid 1px red;
}

ul {
    height: 200px;
    width: 1200px;
    position: relative;
    left: 0;
}

li {
    float: left;
}

img {
    display: block;
    height: 150px;
    position: relative;
    top: 25px;
    margin: 0 2px;
}

li.active img {
    top: 0px;
}

JavaScript

var ImageFlow = new Class({
    
    Implements: [Events, Options],
    
    options: {
        fadeAmount: 0.4,
        reduceBy: 50,
        height: 200
    },
    
    currentIndex: 0,
    
    offsets: [],
    
    initialize: function(options){
        this.setOptions(options);
        
        this.cont = $('image-flow').getElement('ul');
        this.slides = $$('#image-flow li');
        this.nav = $$('a.ifNav');
        
        this.start();
    },
    
    getSmallWidth: function(size){
        return (((size.y - this.options.reduceBy) / size.y) * size.x).toInt();
    },
    
    getFullWidth: function(size){
        return (((size.y + this.options.reduceBy) / size.y) * size.x).toInt();
    },
    
    start: function(){
        var combined = 0;
        
        this.slides.getElement('img').set('styles', {
            'opacity': this.options.fadeAmount,
            'z-index': 10
        });
        
        this.slides[0].getElement('img').set('styles', {
            'height': this.options.height,
            'opacity': 1,
            'z-index': 50
        });
        
        this.nav.each(function(navItem){
            navItem.addEvents({
                click: function(e){
                    if (e) e.stop();
                    
                    // fade out other slides
                    this.slides.getElement('img').morph({
                        'height': this.options.height - this.options.reduceBy,
                        'opacity': this.options.fadeAmount,
                        'top': 25
                    }).setStyle('z-index', 10);
                    
                    // increase/decrease the counter
                    if (navItem.get('href').indexOf('previous') >= 0){
                        if (this.currentIndex !== 0){
                            this.offsets.pop();
                            --this.currentIndex;
                        }
                    } else {
                        if (this.currentIndex <...