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 sito dell’autore: sfondo a tutto schermo con Supersized.
Tags: background, galleria immagine, jQuery, plugin jquery, supersized
Nel corso degli anni ho acquisito una vasta esperienza nella progettazione e realizzazione in ambito siti e applicazioni web, ma continuo ad approfondire le mie conoscenze e a sperimentare, per migliorarmi e seguire l'evoluzione di Internet.
Mi occupo delle nuove tecnologie di sviluppo sul Web/Internet, con particolare attenzione ad Ajax, Web2.0, jQuery, PHP.
Ulteriori conoscenze da esperienze lavorative:
Utilizzo libreria Javascript jQuery
Utilizzo Ext JS framework Javascript per GUI (Utile per realizzare interfacce grafiche complesse per applicazioni web)
Conoscenza framework PHP Symfony
Utilizzo del database PostgreSQL
Ciao,
sto sviluppando un sito in cui ho usato il plugin jquery supersized ma c’è un’anomali…lo slideshow funziano solko sulla home page, quando clicco sulle altre pagine lo sfondo appare vuoto….volevo sapere se hai una soluzione?
Ciao Alessia, controlla se il link dell’immagine punta alla risorsa desiderata nelle pagine interne. Prova a sostituire i link delle immagini nel codice javascript con i path assoluti alla risorsa, es. http://www.dominiosito.it/images/nome_immagine.jpg
Ciao, sto provando a far funzionare supersized con internet explorer 9. Il risultato è nada de nada de nada. Come posso fare??? Help!!!
Ciao Flavio,
Se pubblico il progetto su cui hai applicato supersized posso verificare il problema e darti una mano.
Ciao…..cerco ovunque istruzioni su come caricare Supersized in Joomla ma non trovo nulla….sia zappato che in cartella non me lo installa….ho già installato Jquery, devo caricarlo da li?
Scusa magari la richiesta banale e scontata ma…..sono alle prime esperienze….
Ti ringrazio molto
Salve,
sto usando la funzione supersized di Jquery, in particolare l’ultima versione!
Praticamente dovrei usarlo in più pagine ognuna con una propria immagine.
Guardando il demo, vedo che nello script ove dichiaro tutte le variabili e le relative assegnazione ho anche il percorso delle immagini che devono essere dichiarate.
[CODE]
slides : [ // Slideshow Images
{image : 'kazvan-1.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'kazvan-1.jpg', url : ''},....
[/CODE]
Al fine di evitare di richiamarmi ogni volta tutto lo script con le variabili, che soluzione potreste consigliarmi?
Grazie.