L'effetto al quale mi sono ispirato per questo esempio è la visualizzazione in stile cover flow delle cartelle in Mac OS X. Sinceramente, la parte più difficile dell'esempio non è stata quella relativa all'utilizzo dell'oggetto slider() di jQuery UI, quanto piuttosto l'assegnazione dei corretti stili CSS alle immagini. Vediamo insieme i dettagli.
Oltre alla libreria jQuery UI, per il nostro esempio abbiamo bisogno di inserire anche un riferimento al foglio di stile di un tema di questa libreria:
<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>
Quindi possiamo definire la marcatura del nostro esempio:
<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>
Nel CSS dobbiamo usare le classi specificate per posizionare le immagini avendo la prima centrata in orizzontale e in verticale, e le altre posizionate in modo scalare alla sua destra. Giocheremo con i valori delle proprietà right, top e z-index per creare questo effetto scalare:
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;
}
Con jQuery non dobbiamo fare altro che associare l'evento slide dello slider al suo valore (value) che cambia a seconda se si scorre il controllo da sinistra verso destra (aumenta) o da destra verso sinistra (diminuisce). Dobbiamo anche assegnare allo slider un valore minimo e massimo per impedire al valore di superare il numero delle immagini. Quindi useremo tale valore come indice del metodo eq() per selezionare l'immagine corrente e cambiare la sua classe CSS in modo da mostrare sempre un'immagine alla volta al centro del contenitore.
$(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');
}
}
});
});
Solo un'immagine per volta può avere la classe CSS front che la pone al centro del contenitore. jQuery UI estende i metodi jQuery per le classi CSS in modo da creare effetti di animazione come con gli altri metodi jQuery per le animazioni.
Potete visionare l'esempio finale in questa pagina.