MovingBoxes

Sort demo

HTML

<link rel="stylesheet" href="http://chriscoyier.github.com/MovingBoxes/css/movingboxes.css">
<script src="http://chriscoyier.github.com/MovingBoxes/js/jquery.movingboxes.js"></script>
<!--[if lt IE 9]>
<link  type="text/css"  href="http://chriscoyier.github.com/MovingBoxes/css/movingboxes-ie.css"  rel="stylesheet" media="screen" />
<![endif]-->

<ul id="slider">
    
    <li>
        <img src="http://beshur.net/images/1.jpg" alt="picture" />
    </li>
    
    <li>
        <img src="http://chriscoyier.github.com/MovingBoxes/demo/2.jpg" alt="picture" />
    </li>
    
    <li>
        <img src="http://beshur.net/images/3.jpg" alt="picture" />
    </li>
    
    <li>
        <img src="http://chriscoyier.github.com/MovingBoxes/demo/4.jpg" alt="picture" />
    </li>
    
    <li>
        <img src="http://chriscoyier.github.com/MovingBoxes/demo/5.jpg" alt="picture" />
    </li>
    
    <li>
        <img src="http://chriscoyier.github.com/MovingBoxes/demo/6.jpg" alt="picture" />
    </li>
    
    <li>
        <img src="http://chriscoyier.github.com/MovingBoxes/demo/7.jpg" alt="picture" />
    </li>
    
</ul>

CSS

#slider img { height: 116px; position: relative; top: 0;
    width: auto !important; /* At all times this stays originally wide */
    max-width: none !important /* At all times this stays originally wide */ }

.mb-inside { text-align: center; overflow: hidden}

.mb-inside {border: none}
.mb-panel {overflow: hidden; border: 1px solid #999; margin: 0 5px !important}

JavaScript

var shiftContent = function(slider, cur) {
    slider.$panels.removeClass('left right');
    // cur is 1-based, so think of it as +1
    slider.$panels.eq(cur - 2).addClass('left'); // panel to left of center
    slider.$panels.eq(cur).addClass('right'); // panel to right of center
};

$('#slider').movingBoxes({
    // **** Appearance ****
    // start with this panel
    startPanel: 1,
    // overall width of movingBoxes
    width: 300,
    // current panel width adjusted to 50% of overall width
    panelWidth: 0.5,
    // non-current panel size: 30% of panel size
    reducedSize: 0.3,
    // **** Callbacks ****
    // e = event, slider = MovingBoxes Object, tar = current panel #
    // callback when MovingBoxes has completed initialization
/*
    initialized: function(e, slider, tar) {
        shiftContent(slider, tar);
    },
*/
    // callback before any animation occurs
//    beforeAnimation: function(e, slider, tar) {
        // get name from title
        // var name = slider.$panels.eq(tar-1).find('h2').text().split(' ')[0]; 
//        shiftContent(slider, tar);
//    }

});