Element.partition

Partitions and element with a background-image into several sections, but looks the same as before, useful for advanced Gallery transitions.

by rpflorence

HTML

<div id="image"></div>

CSS

div#image {
    background: url(http://www.google.com/logos/olympics10-sskating-hp.png) left top;
    width: 524px;
    height: 170px;
}

div#image > span {

}

JavaScript

Element.implement({
    
    partition: function(how, partitions){
        var elements = [];
        var bg = this.getStyle('background-image');

        if(how == 'horizontal'){
            var elWidth = this.getSize().x;
            var width = (elWidth / partitions).floor();
            partitions.times(function(i){
                var partition = new Element('span',{
                    styles: {
                        'display': 'block',
                        'width': width,
                        'height': '100%',
                        'background-image': bg,
                        'background-position': (- width * i) + 'px 0',
                        'float': 'left'
                    }
                }).inject(this);
                elements.push(partition);
            }, this);
        };
        
        this.store('partitions', elements);
        return this;
    }
    
});

window.addEvent('load', function(){
    $('image').partition('horizontal', 5);
    console.log($('image').retrieve('partitions'));
});