jQuery sicuramente non potrà mai sostituire Flash al 100%, ma si rivela estremamente utile per ricreare alcune animazioni che in precedenza venivano implementate con Flash. Tipico il caso di una galleria di immagini in cui ciclicamente si alternano le didascalie delle immagini unitamente ad un cambiamento del colore di sfondo delle immagini stesse. Vediamo i dettagli di questo esempio.
Partiamo dalla seguente marcatura:
<div id="image-wrapper">
<img src="1.jpg" alt="Stelle" />
<img src="2.jpg" alt="Astratto" />
<img src="3.jpg" alt="Pietra" />
</div>
E dal seguente CSS:
#image-wrapper {
height: 100%;
overflow: hidden;
width: 650px;
margin: 2em auto;
}
#image-wrapper img {
float: left;
padding: 0.4em;
background: orange;
border: 1px solid maroon;
margin-right: 5px;
}
#image-captions {
clear: both;
height: 66px;
padding-left: 98px;
background: url(arrow.png) no-repeat;
width: 103px;
position: relative;
padding-top: 30px;
font: small Verdana, sans-serif;
text-transform: uppercase;
}
L'elemento image-captions verrà mostrato e spostato di volta in volta sotto ciascuna immagine, impostando il suo contenuto testuale sul valore dell'attributo alt dell'immagine corrente.
Per animare il colore di sfondo delle immagini useremo il plugin Color. Gestiremo le animazioni con un oggetto JavaScript:
var Animator = new function () {
var self = this;
this.target = $('#image-wrapper');
this.dynamic = '<div id="image-captions"/>';
this.titles = [this.target.find('img').eq(0).attr('alt'),
this.target.find('img').eq(1).attr('alt'),
this.target.find('img').eq(2).attr('alt')];
this.insertDynamic = function() {
$(this.dynamic).appendTo('#image-wrapper').hide();
};
this.runAnimation = function() {
window.setTimeout(function() {
$('#image-wrapper').
find('img').
animate({'backgroundColor': 'orange'})
.parent()
.find('#image-captions')
.css('left', 0);
$('#image-wrapper').
find('img')
.eq(0)
.animate({
backgroundColor: 'yellow'
}, 1000)
.parent()
.find('#image-captions')
.text(self.titles[0])
.show(1000);
window.setTimeout(function() {
$('#image-wrapper').
find('img')
.eq(0)
.animate({'backgroundColor': 'orange'})
.parent()
.find('#image-captions')
.hide();
$('#image-wrapper').find('img').eq(1).animate({
backgroundColor: 'green'
}, 1000)
.parent()
.find('#image-captions')
.text(self.titles[1])
.css('left', 205)
.show(1000);
window.setTimeout(function() {
$('#image-wrapper').
find('img').
eq(1).
animate({'backgroundColor': 'orange'})
.parent().
find('#image-captions')
.hide();
$('#image-wrapper').find('img').eq(2).animate({
backgroundColor: 'silver'
}, 1000).
parent()
.find('#image-captions')
.text(self.titles[2])
.css('left', 405)
.show(1000);
}, 1000);
}, 1000);
}, 1000);
};
this.init = function() {
this.insertDynamic();
window.setTimeout(function() {
self.runAnimation();
window.setTimeout(arguments.callee, 3000);
}, 1000);
};
};
Il metodo runAnimation() è costituito da tre timer JavaScript annidati che poi confluiranno nel metodo init() il quale, tramite un autoriferimento, creerà un ciclo infinito di animazioni. Notate come di volta in volta la didascalia venga popolata, mostrata o nascosta e spostata esattamente sotto l'immagine a cui fa riferimento.
Potete visionare l'esempio finale in questa pagina.