immagine avatar

Ciao come puoi notare ho dato una bella rinfrescatina al mio blog!
Attendo un tuo feedback, per suggerimenti e ulteriori proposte di miglioramento, ma anche, sperando che non ci siano, segnalazioni di errori o malfunzionamenti del blog. Buona lettura!

Sfondo a tutto schermo con jQuery

di MaiNick | 7 dic 2009 | jQuery, Webdesign | 8 Commenti
supersized.jpg

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: , , , ,

8 Commenti

  1. Alessia scrive:

    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?

  2. flavio scrive:

    Ciao, sto provando a far funzionare supersized con internet explorer 9. Il risultato è nada de nada de nada. Come posso fare??? Help!!!

  3. Mirco scrive:

    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

  4. Roberto scrive:

    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.

  5. alessandro scrive:

    ciao ragazzi, sto cercando di applicare questa plugin ad un div, sapete se si può fare e come???

    grazie

Trackbacks

  1. diggita.it scrive:

    Sfondo a tutto schermo con Supersized jQuery Plugin…

    Supersized plugin jQuery implementa il background di un sito web con un’unica immagine di dimensioni fisse che verrà automaticamente ridimensionata per riempire l’intero browser. Altra caratteristica molto interessante, permette di realizzare …

Lascia un Commento

^ Torna su