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>
<p style="text-align:center">Please see <a href="https://github.com/chriscoyier/MovingBoxes/issues/52">issue #52</a> for details on the limitations of this method.</p><br>

<!--[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://chriscoyier.github.com/MovingBoxes/demo/1.jpg" alt="picture" />
        <h2>Olivia News Heading</h2>
        <p>A very short exerpt goes here... <a href="http://flickr.com/photos/justbcuz/112479862/">more</a></p>
    </li>
    
    <li>
        <img src="http://chriscoyier.github.com/MovingBoxes/demo/2.jpg" alt="picture" />
        <h2>Alice News Heading</h2>
        <p>A very short exerpt goes here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more</a> and a whole lot more text goes here, so we can see the height adjust.</p>
    </li>
    
    <li>
        <img src="http://chriscoyier.github.com/MovingBoxes/demo/3.jpg" alt="picture" />
        <h2>Yin News Heading</h2>
        <p>A very short exerpt goes here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more</a></p>
    </li>
    
    <li>
        <img src="http://chriscoyier.github.com/MovingBoxes/demo/4.jpg" alt="picture" />
        <h2>Gerri News Heading</h2>
        <p>A very short exerpt goes here... <a href="http://flickr.com/photos/emikohime/294092478/">more</a></p>
    </li>
    
    <li>
        <img src="http://chriscoyier.github.com/MovingBoxes/demo/5.jpg" alt="picture" />
        <h2>Tabitha News Heading</h2>
        <p>A very short exerpt goes here... <a href="http://www.flickr.com/photos/fensterbme/499006584/">more</a></p>
    </li>
    
    <li>
        <img...

JavaScript

$('#slider').movingBoxes({

    // 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,

    // if true, the panel will "wrap" (it really rewinds/fast forwards) at the ends
    wrap: true,
    
    // e = event, slider = MovingBoxes Object, tar = current panel #
    // callback when MovingBoxes has completed initialization
    initialized: function(e, slider, tar){
        // hide all non-current panel text
        slider.$panels.filter(':not(:eq(' + (tar) + '))').find('h2,p').hide();
    },
    // callback upon change panel initialization
    initChange: function(e, slider, tar){
        var t = (tar < 1) ? slider.totalPanels : (tar > slider.totalPanels) ? 1 : tar,
        $tar = slider.$panels.eq(t);
        // hide non-current panel text
        slider.$panels.not($tar).find('h2,p').slideUp('slow');
        // show current panel text
        $tar.find('h2,p').slideDown('slow');
    }
});