Vogliamo creare un effetto di innalzamento sull'altezza delle immagini in uno slideshow realizzato con jQuery. Faremo in modo che le immagini risultino tagliate e spostate verso il basso tramite il posizionamento relativo. Quando lo slideshow scorrerà, l'immagine corrente assumerà la piena altezza. Vediamo i dettagli dell'implementazione.
Abbiamo uno slideshow con un solo controllo:
<div id="slideshow">
<div id="slide-wrapper">
<img src="1.jpg" alt="" />
<img src="2.jpg" alt="" />
<img src="3.jpg" alt="" />
</div>
</div>
<div id="controls">
<a href="#" id="control">Scorri</a>
</div>
Le immagini sono larghe 250 pixel e la più alta misura 181 pixel in altezza. Quindi il contenitore più interno dovrà essere largo 1000 pixel, ma parte del suo contenuto verrà nascosto dalla proprietà overflow dichiarata sul suo genitore:
#slideshow {
width: 550px;
height: 167px;
background: #eee;
position: relative;
overflow: hidden;
margin: 0 auto;
padding-left: 50px;
}
#slide-wrapper {
width: 1000px;
height: 167px;
overflow: hidden;
position: relative;
left: 550px;
}
#slide-wrapper img {
float: left;
position: relative;
top: 110px;
margin-right: 10px;
}
Con jQuery dobbiamo creare un indice incrementale per selezionare l'immagine corrente. Quando questo indice raggiunge il numero massimo consentito dal set di immagini, va riportato a zero. Per mostrare le immagini con l'effetto di scorrimento useremo un valore negativo per la proprietà left del loro contenitore. Questo valore tornerà a zero quando resetteremo l'indice del set. Per far alzare le immagini imposteremo semplicemente la loro proprietà top su 0:
var Slideshow = new function() {
var slideshow = $('#slideshow');
var slideWrapper = $('#slide-wrapper', slideshow);
var images = $('img', slideWrapper);
var control = $('#control', '#controls');
this.slide = function() {
var index = -1;
var left = '';
control.click(function(event) {
index++;
if(index == 3) {
index = 0;
left = 0;
images.css('top', 110);
} else {
left = '-=300px';
}
var img = images.eq(index);
slideWrapper.animate({
left: left
}, 'slow', function() {
img.animate({
top: 0
}, 'slow');
});
event.preventDefault();
});
};
}();
$(function() {
Slideshow.slide();
});
Quando l'indice viene riportato a zero dobbiamo anche spostare di nuovo verso il basso le immagini agendo sulla loro proprietà top. Per questo usiamo il metodo css() che ci consente un'azione dall'effetto immediato.
Potete visionare l'esempio finale in questa pagina.