Background con rotazione immagini
by maxk • 17 luglio 2012 • jQuery • 5 Commenti
Creiamo delle immagini di background che si adattano alla finestra browser e ruotano con effetto fading ad intervallo di tempo impostati con jQuery.
Questo plugin per jQuery, permette di creare un’immagine di background che si ridimensiona in base alla finestra del browser; oltre a questo, inserendo più immagini, queste vengono visualizzate in sequenza con effetto fading.
Collegandovi a questo link, potete vederlo in opera.
Come funziona
Come prima cosa, bisogna scaricare il plugin dal seguente link bgFadeImage – jQuery Plugin.
All’interno del file ZIP, c’è tutto il necessario per provare subito il plugin (è una copia della pagina demo, vedi link sopra) e capire come funziona.
Copiate il file jquery.bgFadeImage.js nella vostra cartella degli script; poi inserire nella vostra pagina HTML i richiami al file e a jQuery, come nell’esempio seguente:
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script type='text/javascript' src='percorso/al/file/jquery.bgFadeImage.js'></script>
</head>
Ho sottinteso che la libreria jQuery la includiate dalla repository di Google. Se invece avete un file locale al vostro sito, la includete come per il file di plugin.
Ora dovete inserire nella pagina tutte le immagini che dovranno essere utilizzate come background. La procedura è semplicissima, basta creare un DIV, in qualsiasi posizione della pagina, con all’interno le immagini che volete utilizzare:
<div id='background'> <img src='percorso/alle/immagini/nature_1.jpg' alt='Nature 1' title='Image nature 1' /> <img src='percorso/alle/immagini/nature_2.jpg' alt='Nature 2' title='Image nature 2' /> <img src='percorso/alle/immagini/nature_3.jpg' alt='Nature 3' title='Image nature 3' /> <img src='percorso/alle/immagini/nature_4.jpg' alt='Nature 4' title='Image nature 4' /> </div>
Il title nelle immagini serve se volete utilizzare anche l’opzione caption, altrimenti non è necessario.
A questo punto, basta attivare il plugin e per farlo dovete aggiungere un codice Javascript alla pagina, o direttamente inline (nel codice sorgente) oppure in uno script esterno da includere.
In ogni modo, la funzionalità di attivazione del plugin non cambia:
$("#background").bgFadeImage();
Come avrete notato, ho richiamato l’attributo ID che avevo usato nel DIV sopra (#background). Se avete usato un ID di nome diverso, dovrete usare quello.
A questo punto il plugin è perfettamente funzionante con le opzioni standard. Se volete personalizzarlo, procedete con il seguente capitolo.
Personalizziamo il plugin
Il plugin, di default, funziona con le impostazioni di base che sono:
- showtime (millisecondi) – Tempo di visualizzazione per ogni immagine (d. 3000)
- loading (testo) – Testo visualizzato durante il preloading delle immagini (d. Loading images)
- fadetime (millisecondi) – Tempo di durata dell’effetto fading (d. 3000)
- random (booleano) – Attiva/Disattiva il caricamento casuale della prima immagine (d. false)
- caption (testo) – Attiva/Disattiva il caption (d. false)
- captioncss (oggetto) – Personalizzazione degli stili per il caption (d. vedi più sotto)
Se volete variare i valori di default del plugin, basta semplicemente assegnare il nuovo valore in fase di attivazione del plugin, in qualsiasi ordine:
$("#background").bgFadeImage({
loading: "Caricamento immagini"
, fadetime: 1000
, random: true
});
Attiviamo e personalizziamo il caption
Questa opzione permette di visualizzare il titolo delle immagini in sovraimpressione nell’immagine di background. Per attivare l’opzione caption basta semplicemente indicare la posizione in cui si vuole appaia, usando una delle seguenti condizioni:
- false (disattivato – opzione di default)
- top left / right ( margine alto sinistro / destro )
- bottom left / right ( margine basso sinistro / destro )
Se ad esempio vogliamo posizionare il caption in basso a sinistra, passeremo al plugin il seguente parametro:
$("#background").bgFadeImage({
caption: "bottom left"
});
Una volta attivata l’opzione, abbiamo anche la possibilità di personalizzare gli stili CSS per adattare il caption alle nostre esigenze di stile.
Per fare ciò bisogna inserire le configurazioni nel parametro captioncss che è un oggetto; i parametri CSS modificabili sono dei normalissimi parametri CSS (a parte “margin”), e sono:
- background: “#fff” (colore del sfondo del contenitore)
- opacity: 0.8 (trasparenza del contenitore)
- font: “0.75em Helvetica” (dimensione e font del testo visualizzato)
- padding: “0.125em” (lo spazio interno del contenitore)
- width: “auto” (larghezza del contenitore)
- margin: “0.625em” (distanza dal bordo pagina – parametro unico per tutte le posizioni)
I valori utilizzati sono quelli impostati di default. Potete variarli a vostro piacimento, come da esempio:
$("#background").bgFadeImage({
caption: "bottom left"
, captioncss: {
opacity: 0.9
, font: "16px Arial"
, padding: "3px"
, width: "100%"
, margin: 0
}
});
Il plugin all’opera
Potete vedere il plugin in opera collegandovi a questo link.
Per scaricarlo, invece, utilizzte questo link.
Naturalmente, inserendo una sola immagine nel DIV contenitore, non si avrà alcun effetto rotativo.
Per qualsiasi problema o suggerimento, potete lasciare un commento a questo articolo oppure scrivermi utilizzando la pagina dei contatti.
funziona tutto benissimo, grazie mille !!!
Salve, ottimo script, complimenti.
Vorrei sapere se è possibile far in modo che le immagini vengano caricate all’interno di un div senza resize e senza mandarle come sfondo del sito, ma come sfondo solo di quel div.
Ciao, grazie per i complimenti.
Lo script nasce per il background, infatti tutto il codice è stato studiato per quell’effetto. E’ sicuramente adattabile alla visualizzazione in un semplice contenitore, però deve essere rivisto il codice Javascript.
Grazie, mi pare ottimo.
Una sola domanda, però. Funziona solo con immagini rettangolari?
sto provando a caricare un’immagine verticale ( 2000×3000 ) ma non la visualizza.
Complimenti ancora
Sinceramente non l’ho testato con immagini portrait. Appena ho del tempo provo a verificare e se ci sono problemi lo aggiorno.