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>
<button class="slideshow"></button>

<!--[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>
        harsh
    </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 src="http://chriscoyier.github.com/MovingBoxes/demo/6.jpg" alt="picture" />
        <h2>Mary News Heading</h2>
        <p>A very short exerpt goes here... <a href="#">more</a></p>
    </li>
    
    <li>
        <img src="http://chriscoyier.github.com/MovingBoxes/demo/7.jpg" alt="picture" />
        <h2>Kitty News Heading</h2>
        <p>A very short exerpt goes here... <a href="#">more</a></p>
 ...

CSS

#slider {
    width: 300px;
}
#slider li {
    width: 150px;
}
.slideshow {
    display: none;
}

JavaScript

// Make MovingBoxes Slideshow
$(window).load(function(){
    var slideShowDelay = 4000, // 4000 millisecond = 4 seconds
        timer,
        mb = $('#slider').data('movingBoxes'),
        loop = function(){

            // next slide, use mb.goBack(); to reverse direction
            mb.goForward();
            // run loop again
            timer = setTimeout(function(){
                loop();
            }, slideShowDelay);
        };
    // toggle slideshow button
    $('button.slideshow')
        .attr('data-mode', "false") // slideshow paused
        .click(function(){
            clearTimeout(timer);
            // slide show mode
            var mode = $(this).attr('data-mode') === "false";
            if (mode) {
                loop();
            }
            $(this).attr('data-mode', mode).html(button);
        });
});

// Initialize MovingBoxes
$('#slider').movingBoxes({

    // overall width of movingBoxes
    // width: 300, // Deprecated, but still works in v2.2.2
    // current panel width adjusted to 50% of overall width
    // panelWidth: 0.5, // Deprecated, but still works in v2.2.2    
    
    // **** Appearance ****
    // start with this panel
    startPanel: 1,
    // non-current panel size: 80% of panel size
    reducedSize: 1,
    // if true, slider height set to max panel height; if false, height will auto adjust.
    fixedHeight: false,
    
    // **** Behaviour ****
    // animation time in milliseconds
    speed: 100,
    // if true, hash tags are enabled
    hashTags: true,
    // 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,
    // function which returns the navigation text for each panel
    navFormatter: function(index, panel){ return "&#9679;" },
    // anything other than "linear" or "swing" requires the easing plugin
    easing: 'swing',
    
    // **** Selectors & classes ****
    // current panel class
   ...