CSS transition slideshow

by yong

HTML

<ul class="album">
    <li><img src="http://flickholdr.com/400/280/london" /></li>
    <li><img src="http://flickholdr.com/400/280/losangeles" /></li>
    <li><img src="http://flickholdr.com/400/280/tokyo" /></li>
    <li class="active"><img src="http://flickholdr.com/400/280/newyork" /></li>
</ul>

CSS

body {
    background: #ccc;
    padding: 50px;
}

.album {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}
.album li {
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 1;
    border: 4px solid #fff;
    -ms-transform:rotate(5deg);
    -webkit-transform:rotate(5deg);
    -moz-transform:rotate(5deg);
    z-index: 100;
    opacity: 1;
}
.album li.active {
    -moz-transition: all 0.5s ease-in;
    -webkit-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    transform:rotate(0deg);
    z-index: 200;
}
.album li.slide {
    -moz-transition: all 1s ease-in;
    -webkit-transition: all 1s ease-in;
    transition: all 1s ease-in;
    -moz-transform: translate(150px,150px) rotate(-30deg);
    -webkit-transform: translate(150px,150px) rotate(-30deg);
    transform: translate(150px,150px) rotate(-30deg);
    opacity: 0;
    z-index: 300;
}
.album li img {
    display: block;
}

JavaScript

$(function() {
    $('ul.album li.active').live('click', function() {
        /* There's a reason I call the prev item "next" and last "first". 
        I'm doing everything backwards since the last item has the highest z-index */
        var $this = $(this), // the clicked item
            $next = $this.prev('li'), // the next item
            $firstItem = $this.siblings().last(); // the first item
            
        // Reset if we are at the last item
        if(!$next.length) {
            $next = $firstItem;
        }
        
        // Throw away the clicked item
        $this.addClass('slide').removeClass('active');
        
        // Display the next item
        $next.addClass('active');
        
        // Reset the clicked item after 1 second
        setTimeout(function() { $this.removeClass('slide'); }, 1000);
    });
});