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>
<!--[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 short exerpt goes here... <a href="#">more</a></p>
    </li>
    
    <li>
       ...

CSS

.mb-panel {
    overflow: visible !important;
}
.mb-panel .grow {
    padding: 10px;
    border: 1px solid #999;
    position: relative;
    width: 120%;
    left: -30px;
    z-index: 1999;
    background: white;
    -webkit-animation: .5s ease;
    -moz-animation: .5s ease;
    -ms-animation: .5s ease;
    -o-animation: .5s ease;
    animation: .5s ease;
    -webkit-animation-name: grow;
    -moz-animation-name: grow;
    -ms-animation-name: grow;
    -o-animation-name: grow;
    animation-name: grow;
}

@-webkit-keyframes grow {
    0%   { left: 0;     width: 100%; }
    100% { left: -30px; width: 120%; }
}
@-moz-keyframes grow {
    0%   { left: 0;     width: 100%; }
    100% { left: -30px; width: 120%; }
}
@-ms-keyframes grow {
    0%   { left: 0;     width: 100%; }
    100% { left: -30px; width: 120%; }
}
@keyframes grow {
    0%   { left: 0;     width: 100%; }
    100% { left: -30px; width: 120%; }
}

JavaScript

$('#slider').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, slider height set to max panel height; if false, height will auto adjust.
    fixedHeight: false,
    
    // **** Behaviour ****
    // animation time in milliseconds
    speed: 500,

    // **** Callbacks ****
    // e = event, slider = MovingBoxes Object, tar = current panel #
    // callback when MovingBoxes has completed initialization
    initialized: function(e, slider, tar){
        // increase heights by 130% - doesn't seem to work for all panels
        slider.heights = slider.$panels.map(function(i,e){
            return $(e).outerHeight(true) * 1.3;
        }).get();
        // set starting panel
        slider.$panels.eq(tar-1).find('.mb-inside').addClass('grow');
    },
    // callback before any animation occurs
    beforeAnimation: function(e, slider, tar){
        slider.$el.find('.grow').removeClass('grow');
        slider.$panels.eq(tar-1).find('.mb-inside').addClass('grow');
    }

});