Sfondi a tutta pagina con jQuery

Grazie all'ingresso in gioco di jQuery è sempre più possibile creare siti completi di tutto ciò che può servire con il solo uso del trinomio HTML + CSS + jQuery.

Il ragionamento si può applicare soprattutto per quanto riguarda i siti web personali: portali che devono dare il più possibile l'idea di cosa si fa, di come lo si fa e di quali sono i propri talenti.

Oggi parliamo di talenti legati alla grafica e di plugin che permettono di gestire le immagini, con un'attenzione particolare alla gestione degli sfondi delle pagine.

Come è facilmente intuibile, i plugin di questo tipo sono davvero tanti, molti dei quali validi e semplici nella loro installazione e successivo uso. C'è, per esempio, Backstretcher di Aquaron [1] che permette di adattare ad un div un' immagine in maniera automatica. Semplice nel funzionamento e semplice negli scopi.

Oppure, ancora, c'è il valido GalleryJack [2], reperibile su CodeCanyon che permette di creare delle vere e proprie gallery (anche più di una tramite un comodo menu in basso) per sistemare le proprie immagini ed esporle senza preoccuparsi troppo dell'aspetto più "tecnico" della situazione. La potenza di jQuery, ovviamente, non termina qui: ecco che quindi arriviamo a parlare del plugin di oggi, l'ottimo Vegas di Jay Salvat [3].

Non appena si apre il sito web ufficiale del progetto Vegas si comprende presto perché è stato scelto: oltre a gestire le immagini di background ed a creare vere e proprie gallery automatizzate, permette infatti anche di gestire più livelli in overlay, magari per creare determinati tipi di effetti.

L'uso che si può fare di questo plugin ovviamente è chiaro: siti di fotografia, dove esporre i propri lavori a risoluzioni molto alte, o magari dei siti portfolio di artisti e grafici. Il problema della pesantezza inoltre può considerarsi superato: con l'avvento di connessioni sempre più veloci, ormai, non è un problema caricare più immagini insieme ad alta risoluzione.

Scaricare il plugin è semplice: per prima cosa si va sul sito ufficiale del progetto. Da qui si clicca su "Download Vegas" (sarà riportato anche il numero di versione attuale). Verrà automaticamente avviato il download oppure, nel caso dovessero esserci dei problemi, si può tranquillamente fare riferimento al repository su Github [4].

A questo punto si può fare un passo avanti: per prima cosa analizzeremo l'implementazione e il corretto uso del plugin per un caso base, mettendoci infine un altro lager in overlay per dare un senso di completezza delle features. Nella sezione finale, invece, andremo a dare uno sguardo alla creazione di gallerie vere e proprie.

Implementazione e Primo Utilizzo

Vediamo come implementare velocemente il plugin e come ottenere un primo effetto basilare per il nostro esempio. Ovviamente, la prima cosa da fare nel nostro documento è includere l'ultima versione disponibile di jQuery, pronta al download su http://jquery.com/.

Ora allo stesso modo dobbiamo includere nel file il nostro Vegas, tramite la semplice istruzione

dove in corrispondenza di "vegas/jquery.vegas.js" si trova il nostro file principale del plugin. Non bisogna inoltre scordare la presenza del foglio di stile css associato, che verrà incluso nel file con l'istruzione

A questo punto non rimane altro che effettuare la chiamata alla funzione corrispondente, con un codice d'esempio come questo di seguito.

$( function() {
    $.vegas({
      src:'/images/background.jpg'
    });
  });

Il tutto potrebbe sembrare poco chiaro per alcuni, al primo impatto, per cui vediamo di fare luce su tutto. Il codice presentato finora è molto semplice: non fa altro che prendere un'immagine in input ed adattarla come sfondo alla finestra, ridimensionandola automaticamente in base alle esigenze (nel caso, ad esempio, la finestra venne ridimensionata).

Non c'è altro codice da contemplare, tutto viene gestito in maniera autonoma dal plugin. Ecco il listato di codice completo per la prima pagina di prova realizzata per questa guida. La foto presa per questo esempio è la spettacolare "Porth Naven" di sassaputzin su Deviantart.

Untitled Document

Testando il documento possiamo subito prendere atto del risultato. Ora, perché non introdurre qualcosa in più? Arriviamo così a parlare degli overlay, ovvero delle immagini (possibilmente con trasparenze, altrimenti la cosa non ha molto senso) poste sullo sfondo originale. Eccone un esempio, realizzata al volo in photoshop.

Il codice per implementarla è semplicissimo, basta seguire il listato di seguito:

Untitled Document

Com'è possibile notare, i cambiamenti non sono tanti: è bastata l'aggiunta di un semplice richiamo al metodo principale "vegas" specificando come parametro "overlay" e inserendo in "src" il percorso del file da usare.

È possibile scaricare da qui il pacchetto dei file usati per questa prova.

Abbiamo visto com'è semplice lavorare basilarmente con questo plugin. Adesso manca solo l'ultima parte della nostra "escursione" alla scoperta di Vegas. Nella prossima parte infatti vedremo come implementare, senza limitarsi al singolo sfondo, una vera e propria gallery con effetti grafici inclusi nel pacchetto.

Creazione di una Galleria

Implementare le funzionalità base del plugin è stato piuttosto semplice. Nell'avanzamento della nostra scoperta del plugin siamo arrivati alla fine: in questa sezione infatti vedremo come realizzare, senza troppe complicazioni, lo stesso risultato della lezione precedente, con l'aggiunta però di più foto (anziché la sola precedentemente prevista) sfumate l'una con l'altra tramite gli effetti che ci vengono messi a disposizione.

Ancora una volta facciamo ricorso alle foto di sassaputzin (http://sassaputzin.deviantart.com/), incluse nel pacchetto dei file di prova (collegamento). Vediamo come cambiano le istruzioni da fornire nel caso di uno slideshow di foto.

La sintassi corretta da utilizzare è la seguente:

$.vegas('slideshow', {
    backgrounds:[
      { src:'gall/img1.jpg' },
      { src:'gall/img2.jpg' },
      { src:'gall/img.jpg' }
    ]
  })('overlay');

Un po' come avvenuto precedentemente per l'overlay, anche qui si specifica come primo parametro del metodo principale la parola chiave "slideshow" per indicare qual'è il nostro intento. Successivamente, sotto "backgrounds" andiamo ad aggiungere i file da utilizzare, nella formula classica "src:'percorso_del_file'".

Testando il nostro codice vedremo che tutto funziona tranquillamente: l'effetto di transizione non ancora esiste ma le premesse del funzionamento ci sono, ed il codice utilizzato per raggiungere il risultato desiderato è minimo.

Gli "optional" che il plugin ci mette a disposizione sono vari: vediamone uno alla volta, tra quelli più interessanti.

• Fade: innanzitutto gli effetti di transizione. L'effetto di fade tra una foto e l'altra permette un passaggio piacevole alla vista e sofisticato. A livello di sintassi il cambiamento da fare è minimo: basterà sostituire la linea "{ src:'/img/backgroundX.jpg' }" di ogni immagine con { src:'/img/backgroundX.jpg', fade:Y }. Il parametro numerico Y che viene dato in input a "fade" equivale al numero di millisecondi usati per effettuare il passaggio;
• Delay: l'opzione Delay consente di specificare il tempo che intercorre tra una slide e l'altra. Di default questo è impostato su 5000 millisecondi (cinque secondi) ma il valore è facilmente modificabile. Richiamando la funzione principale, infatti, è possibile specificare la sintassi "delay:XXXX" tra i parametri, indicando il numero di millisecondi;
• Step: specificare lo step vuol dire che impostare la slide di partenza della gallery che abbiamo creato. Impostando, ad esempio, su 2 il valore di tale parametro, la prima immagine da mostrare sarà la numero tre (si consideri infatti 0 come primo elemento dell'insieme). La sintassi è la stessa del parametro delay: "step:X".

Gli strumenti messi a disposizione non terminano qui, e la documentazione corrispondente è più che chiara: su http://vegas.jaysalvat.com/documentation/slideshow/ si possono trovare tutti i dettagli sui Callbacks (in modo tale da richiamare determinati eventi in ogni momento dell'esecuzione del plugin) e sulle varie azioni che si possono effettuare: dal saltare ad una slide precisa al gestire l'esecuzione del tutto, fermando lo slideshow o mettendo tutto in pausa al momento desiderato.

Un plugin completo, quindi, che potrà aiutare molti designer alla ricerca di un plugin affidabile per la gestione di immagini e sfondi, che non dia troppi grattacapi (come a volte può fare una semplice gestione con il CSS).

1. Backstretcher
2. Code Canyon
3. Vegas di Jay Salvat
4. Github repository Vegas