Può capitare. durante la nostra vita lavorativa da webdesigner quotidiana o i momenti di svago, di incappare nella necessità di realizzare uno sfondo che cambi dinamicamente, ma di non aver, per esempio, possibilità e/o le competenze per utilizzare un linguaggio server side come php.
Vediamo quindo come, con poche righe di codice, è possibile ottenere il risultato sperato! Saranno sufficienti un minimo di competenze di javascript ed un’accortezza nella nomenclatura delle foto che utilizzeremo.
Il nostro script in poche righe
$(document).ready(function(){ totaleImmagini=5; randomNumber = Math.round(Math.random()*(totaleImmagini-1))+1; imgPath=('/my/image/path/'+randomNumber+'.jpg'); //il percorso può essere relativo o assoluto $('#container').css('background-image', ('url("'+imgPath+'")')); });
Spiego a parole quello che fa lo script. In primo luogo dichiariamo il numero di immagini che abbiamo a disposizione da far ruotare. Nel nostro caso saranno 5. Successivamente, utilizzando le funzione Math.round (arrotonda al numero intero più vicino) e Math.random (genera un numero casuale tra 0 e 1), estraiamo un numero casuale compreso tra 1 e 5. Dichiariamo quindi il percorso in cui si trovano le nostre immagini ed impostiamo, ad esempio, lo sfondo del nostro contenitore con l’immagine scelta. Ne va da sè che ad ogni aggiornamento della pagina la foto cambierà.
Attenzione alla nomenclatura
Nell’esempio appena visto, affinchè lo script funzioni, è necessario che le nostre immagini siano numerate da 1 a 5. Nel caso avessimo la necessità di dare dei nomi più sensati alle foto, dovranno comunque mantenere una struttura nel nome simile. Ad esempio, se stiamo utilizzando delle foto di cascate, potremo scrivere cascate-niagara-01.jpg ecc… andando quindi a cambiare il percorso (path) dell’immagine in: imgPath=('/my/image/path/cascate-niagara-0'+randomNumber+'.jpg');
