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>
<script src="http://mottie.github.com/Keyboard/js/jquery.mousewheel.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://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 src="http://chriscoyier.github.com/MovingBoxes/demo/6.jpg" alt="picture" />
        <h2>Mary News Heading</h2>
        <p>A very...

CSS

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

JavaScript

$('#slider').movingBoxes({
    buildNav: true,
    // if true, navigation links will be added
    preinit: function(e, mb, tar) {
        var defaultTime = 500;
        mb.$window.mousewheel(function(event, delta) {

            // Modify animation time based on delta
            // delta values are varied across browsers/OS,
            // so we need to normalize it somehow
            var newTime, direction = (delta < 0) ? -1 : 1,
                ab = Math.abs(delta),
                newDelta = ab * 10;
            if (ab > 1000) { // probably never be this high; but just in case
                newDelta = 100;
            }
            if (ab > 100 && ab < 1000) {
                newDelta = ab / 10;
            }
            if (ab < 100) {
                newDelta = ab * 10;
            }

            // end up with a time between 50 and defaultTime
            newTime = Math.floor(Math.abs(defaultTime * 30 / newDelta));
            newTime = (newTime > defaultTime) ? defaultTime : (newTime < 50) ? 50 : newTime;

            // change animation speed
            mb.options.speed = newTime;
            // using change because it includes a callback
            mb.change(mb.curPanel - direction, function() {
                // change speed back after completed
                mb.options.speed = defaultTime;
            });
            return false; // prevent default
        });
    }
});