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>
<div id="display">current hash = <span id="current-hash">...</span></div>

<!--[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 id="olivia">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 id="alice">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 id="yin">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 id="gerri">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 id="tabitha">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/demo/6.jpg" alt="picture" />
     ...

CSS

#slider {
    width: 300px;
}
#slider li {
    width: 150px;
}


#display {
    text-align: center;
    margin-bottom: 10px;
}

JavaScript

var display = $('#current-hash'),
    updateHash = function(slider){
        var hash = '#' + slider.$curPanel.find('h2')[0].id.replace(/tmp_/,'');
        // remove prefix so hash works on page load
        window.location.hash = hash;
        
        // demo only
        display.text(hash);
    };

$('#slider').movingBoxes({

    // if true, hash tags are enabled
    hashTags: false,

    // if true, navigation links will be added
    buildNav: true,
    
    // **** Callbacks ****
    // e = event, slider = MovingBoxes Object, tar = current panel #
    // callback when MovingBoxes has completed initialization
    initialized: function(e, slider, tar){
        slider.$panels.find('h2').each(function(){
            // add some prefix to the id so setting the hash doesn't
            // make the page jump
            this.id = "tmp_" + this.id;
        });
        updateHash(slider);
    },

    // callback after animation completes
    completed: function(e, slider, tar){
            updateHash(slider);
    }

});