I was actually inspired by the cover flow effect found among the various folder options of Mac OS X to create this demo. Let's see the details.
We need the jQuery UI library and one of its themes to run this demo:
<head> <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-darkness/jquery-ui.css" type="text/css" media="screen" /> </head>
This is our markup:
<div id="coverflow"> <img src="1.jpg" alt="" class="front" /> <img src="2.jpg" alt="" class="side-1" /> <img src="3.jpg" alt="" class="side-2" /> <img src="4.jpg" alt="" class="side-3"/> <img src="5.jpg" alt="" class="side-4" /> </div> <div id="slider"></div>
The image with class front must be horizontally and vertically centered, while the other images must be stacked to its right side using a different z-index for each singular CSS class:
body {
margin: 0;
padding: 0;
}
#coverflow {
width: 100%;
height: 280px;
background: #000;
margin: 0;
position: relative;
overflow: hidden;
}
#coverflow img {
position: absolute;
top: 50%;
margin-top: -75px;
width: 250px;
height: 150px;
}
#coverflow img.front {
left: 50%;
top: 50%;
margin-left: -175px;
z-index: 5;
}
#coverflow .side-1 {
right: 300px;
z-index: 4;
}
#coverflow .side-2 {
z-index: 3;
right: 280px;
top: 48%;
}
#coverflow .side-3 {
right: 260px;
z-index: 2;
top: 46%;
}
#coverflow .side-4 {
right: 240px;
top: 44%;
z-index: 1;
}
#coverflow .side-5 {
right: 260px;
top: 42%;
z-index: 0;
}
#slider {
width: 500px;
margin: 1em auto;
}
We'll use the jQuery Ui's slider() object and its slide event to select the current image via the value property passed to the jQuery's eq() method. Then we'll toggle the current CSS class of the image so that only one image at time will have the class front:
$(function() {
var images = $('img', '#coverflow');
var limit = images.length - 1;
$('#slider').slider({
min: 0,
max: limit,
slide: function(event, ui) {
var index = ui.value;
if(index == 0) {
images.eq(index).toggleClass('front').siblings().
removeClass('front');
} else {
images.eq(index).toggleClass('front', 'slow').
siblings().removeClass('front');
images.eq(0).addClass('side-5');
}
}
});
});
jQuery UI animates the class switching as if they were normal jQuery animations. You can see the demo below.