MovingBoxes

Sort demo

by Mottie

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; width: 30px; position: relative; top: 0; }
.mb-panel { text-align: left; }

.mb-panel.left img { left: 75px; }
.mb-panel.right img { left: 0; }
.mb-panel.current { }
#slider .current img { width: 100%; }

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: 80% of panel size
    reducedSize: 0.8,

    // **** 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);
    }

});