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>
<button class="sort">Sort</button>
<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/images/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/images/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/images/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/images/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/images/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 src="http://chriscoyier.github.com/MovingBoxes/images/6.jpg" alt="picture" />
        <h2>Mary News Heading</h2>
        <p>A very short exerpt goes here... <a...

JavaScript

$('#slider').movingBoxes({
    // start with this panel
    startPanel: 1,
    // overall width of movingBoxes (not including navigation arrows)
    width: 300,
    // Image ration set to 1:1 (square image)
    imageRatio: 1,
    // if true, the panel will "wrap" (it really rewinds/fast forwards) at the ends
    wrap: true,
    // if true, navigation links will be added
    buildNav: true,
    // selector to find the immediate ">" children "li" of "#slider-one" in this case
    panelType: '> li',
    // function which returns the navigation text for each panel
    navFormatter: function() {
        return "&#9679;";
    }
});


$('button.sort').click(function() {
    var slider = $('#slider'),
        items = slider.children().get();
    items.sort(function(a, b) {
        var ca = $(a).find('h2').text().toLowerCase(),
            cb = $(b).find('h2').text().toLowerCase();
        return (ca < cb) ? -1 : (ca > cb) ? 1 : 0;
    });
    $.each(items, function(i, item) {
        slider.append(item);
    });
    slider.movingBoxes(); // update the slider
});