Possiamo aggiungere un interessante effetto di dissolvenza ed assolvenza con scambio di immagini selezionate in modo casuale al nostro tema di Wordpress TwentyEleven utilizzando jQuery. L'effetto prevede la creazione di un array contenente i nomi delle immagini usate nell'header di Wordpress. Tramite il metodo random() dell'oggetto Math creiamo un indice casuale da usare per selezionare un'immagine dall'array. Vediamo insieme i dettagli.
Come prima cosa, dobbiamo creare un metodo all'interno dell'oggetto che gestisce il nostro sito (questa è una pratica raccomandata perchè vi permette di avere maggiore flessibilità anche con altri temi di Wordpress):
var MioSito = new function() {
// altri metodi e proprietà
this.headersHandler = function() {
// codice qui
};
}();
A questo punto memorizziamo in un array i nomi dei file usati nell'header:
var headers = ['wheel.jpg', 'shore.jpg', 'trolley.jpg',
'pine-cone.jpg', 'chessboard.jpg', 'lanterns.jpg',
'willow.jpg', 'hanoi.jpg'];
Ora dobbiamo creare un riferimento all'immagine dell'header:
var headerImg = $('img', '#branding');
Quindi abbiamo bisogno del valore originario dell'attributo src dell'immagine:
var src = headerImg.attr('src');
Il prossimo passo è ottenere l'URL del percorso dell'immagine tranne il nome del file. Usiamo le espressioni regolari con il metodo replace():
var baseSrc = src.replace(/[a-z]+\.jpg$/, '');
Infine, dobbiamo associare un evento hover all'immagine. Quando l'utente muove il mouse sull'immagine, viene creato un indice casuale con cui viene estratta un'immagine dall'array. L'immagine corrente scompare, l'attributo src viene impostato sul nuovo valore e l'immagine quindi riappare. Quando l'utente allontana invece il mouse dall'immagine, l'immagine scompare nuovamente, l'attributo src viene reimpostato sul valore originario e l'immagine riappare:
headerImg.hover(function() {
var index = Math.floor(Math.random() * headers.length)
$(this).stop(true, true).animate({
opacity: 0
}, 1500, function() {
$(this).attr('src', baseSrc + headers[index]).
animate({
opacity: 1
}, 1500);
});
}, function() {
$(this).stop(true, true).
animate({
opacity: 0
}, 1500, function() {
$(this).attr('src', src).
animate({
opacity: 1
}, 1500);
});
});