Sfondo a tutto schermo con jQuery

Inserire un’immagine come sfondo a tutto schermo di un layout web comporta realizzare diverse immagini di backgroud adatte ad ogni risoluzione dello schermo degli utenti.

Questo tipo di soluzione è possibile solo utilizzando un script Javascript che rilevi la risoluzione dello schermo dell’utente e richiami la corrispondente immagine.

Il plugin jQuery che presento oggi risolve il problema utilizzando un unico background di dimensioni fisse che verrà automaticamente ridimensionato per riempire l’intero browser, pur mantenendo il rapporto dimensione dell’immagine.

Altra caratteristica molto interessante, permette di realizzare una vero e proprio slideshow di immagini, con transazioni e preloading, come sfondo del layout web.

Il plugin in esame si chiama Supersized, potete vedere un esempio di utilizzo.

Il plugin è personalizzabile inizializzando le sue opzioni tramite i valori 1 (attivo) e 0 (non attivo)):

• startwidth, startheight: dimensioni dell’immagine di sfondo utilizzati per calcolare il rapporto del ridimensionamento. Tutte le immagini dello slideshow devono avere la stessa risoluzione.
• vertical_center: valore 1 centra l’immagine verticalmente, altrimenti dall’angolo in alto a sinistra.
• slideshow: se attivo implementa lo slideshow.
• navigation: se attivo in caso di slideshow visualizza la barra di navigazione con i bottoni di play/pausa e avanti/indietro.
• transition: effetto di transazione nello slideshow. Gli effetti sono:
  • 0: nessun effetto
  • 1: effetto dissolvenza (default)
  • 2: entrata dall’alto
  • 3: entrata da destra
  • 4: entrata dal basso
  • 5: entrata da sinistra
• pause_hover: mette in pausa lo slideshow quando ci troviamo con il mouse sull’immagine.
• slide_counter: mostra il numero dell’immagine visualizzata nell’elemento con id=”#slide_counter”.
• slide_caption: mostra il contenuto dell’attributo alt nell’elemento con id=”#slidecaption”.
• slide_internal: intervallo in millisecondi tra il cambio di immagine.

Il plugin jQuery è scaricabile dal repository dell’autore: sfondo a tutto schermo con Supersized.