La visualizzazione di immagini attraverso finestre modali che si sovrappongono alla pagina corrente, una modalità di interazione resa popolare dalla libreria Lightbox, è divenuta una sorta di standard per la presentazione di gallerie di immagini e di tanti altri tipi di contenuti (frammenti di codice HTML, pagine e siti caricati via Ajax o con un iframe, video, filmati Flash).
Il panorama delle librerie e degli script che consentono di implementare questa soluzione è molto affollato. Spesso, per chi realizza un sito, la scelta dello strumento giusto può risultare complicata. Quai fattori tenere presenti? Intanto si dovrebbe scegliere sempre in base alle proprie esigenze reali. In base al framework Javascript eventualmente adottato, per esempio. Se si usa sul sito MooTools per altre finalità, è inutile andare incontro ad eventuali problemi di compatibilità o appesantire il carico di script da far scaricare all'utente scegliendo uno script basato su jQuery o su un altro framework.
In molti casi, poi, un'analisi attenta delle reali esigenze in termini di interazione potrebbe portarci alla conclusione che non abbiamo affatto bisogno di appoggiarci ad un framework. Se allora ci serve solo uno script per la visualizzazione in stile Lightbox di una serie di immagini, possiamo affidarci a soluzioni stand-alone come Lytebox o FancyZoom.
Altri fattori importanti da tenere in considerazione sono anche il peso in kilobyte dello script, la facilità di configurazione e personalizzazione, la presenza o l'assenza di funzionalità ritenute necessarie (lo script è in grado di visualizzare video? può caricare contenuti via Ajax? etc...).
Un ottimo strumento per scegliere uno script per gallerie in stile Lightbox che fa per noi, è The Lightbox Clones Matrix (figura 1). Presenta una lista molto nutrita di librerie organizzata in forma di tabella. È possibile ordinare a piacere tutte le colonne e filtrare i dati usando il piccolo box posto in alto a destra (figura 2). Spuntando i vari checkbox possiamo fare in modo di visualizzare nella tabella solo le librerie basate su un certo framework, quelle che supportano il video o Ajax, etc. Il titolo di ciascun script punta alla pagina principale dello stesso, quella da cui in genere si potrà scaricarlo e su cui sono disponibili le demo.
3 soluzioni basate su jQuery
In questo articolo abbiamo deciso di presentare 3 cloni Lightbox che oltre alla possibilità di visualizzare immagini organizzate in gruppi, offrano l'opportunità di caricare contenuti via Ajax e video. Tutti sono basati su jQuery. Nelle sezioni che seguono non approfondiremo nei dettagli le modalità di implementazione e le opzioni di configurazione, limitandoci a fornire indicazioni generali ma sufficienti per una prima valutazione.
Colorbox
Presentato su una paginetta semplice ma elegante, arricchita dai link a numerosissimi esempi e da una documentazione non estesissima ma più che sufficiente, Colorbox rappresenta una soluzione ottimale per chi non voglia limitarsi alla gestione di immagini e gallerie di immagini. Supporta infatti il caricamento e la visualizzazione di contenuti via Ajax, iframe, di contenuti cosiddetti inline (porzioni di codice HTML presenti nella pagina ma nascosti all'utente via CSS). Implementata pure la funzionalità per effettuare il preload delle immagini.
Il peso dello script minificato è pari a 9kb (cui vanno ovviamente aggiunti quelli relativi a jQuery). Il supporto per i browser si estende fino alla versione 6 per Internet Explorer, alla 3+ per Safari e Firefox, alla 9+ per Opera. Funziona alla perfezione su tutte le release di Chrome. Realizzato secondo i principi del Javascript non intrusivo, consente la fruizione dei contenuti anche in assenza del supporto Javascript sul dispositivo di navigazione dell'utente.
Negli esempi che abbiamo preparato, è possibile apprezzare innanzitutto la visualizzazione in serie di un gruppo di immagini (abbiamo alternato foto in modalità landscape e portrait per far risaltare la capacità dello script di auto-adattare le dimensioni della finestra). La transizione scelta è quella 'Elastic', ma è disponibile anche l'opzione 'Fade'. Si può anche impostare una dimensione fissa per l'area di visualizzazione. Per entrambe le situazioni rimandiamo a questa pagina di demo.
Il raggruppamento delle foto avviene assegnando un identico valore ('esempio' nel nostro caso) all'attributo rel degli elementi a che attivano la visualizzazione delle immagini:
<p><a href="http://farm5.static.flickr.com/4123/4885491750_e677899eb2_z.jpg" rel="esempio" title="Zomercarnaval, Rotterdam - 1. Foto di Cesare Lamanna.">Foto raggruppate - 1</a></p>
<p><a href="http://farm5.static.flickr.com/4138/4884927731_b2c7091d01_z.jpg" rel="esempio" title="Zomercarnaval, Rotterdam - 2. Foto di Cesare Lamanna.">Foto raggruppate - 2</a></p>
<p><a href="http://farm5.static.flickr.com/4099/4885520458_179a6ee506_z.jpg" rel="esempio" title="Zomercarnaval, Rotterdam - 3. Foto di Cesare Lamanna.">Foto raggruppate - 3</a></p>
<p><a href="http://farm5.static.flickr.com/4081/4885505704_32cfbf562c_z.jpg" rel="esempio" title="Zomercarnaval, Rotterdam - 4. Foto di Cesare Lamanna.">Foto raggruppate - 4</a></p>L'inizializzazione è delle più semplici:
$("a[rel='esempio']").colorbox();La seconda serie di esempi riguarda il caricamento di contenuti esterni. È possibile visualizzare pagine HTML che risiedono sullo stesso dominio via Ajax, ma anche pagine esterne attraverso un iframe. Per i video, in assenza di un supporto diretto a Flash e ad altri formati multimediali, si può ricorrere a due opzioni alternative.
Nel primo caso si incorpora il riferimento al filmato Flash in un file esterno ('flash.html' nel nostro caso) e si visualizza il file via Ajax:
<p><a class='example5' href="../content/flash.html" title="Royksopp: Remind Me">
Flash / Video (via Ajax)
</a></p>La seconda opzione prevede la creazione di un iframe e il popolamento di quest'ultimo attraverso un link diretto al video che si intende mostrare:
<p><a class='example6' href="http://www.youtube.com/embed/617ANIA5Rqs?rel=0" title="The Knife: We Share Our Mother's Health">
Flash / Video (Iframe con link diretto a YouTube)
</a></p>L'inizializzazione per questa opzione è la seguente:
$(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344});I riferimenti a innerWidth e innerHeight sono relativi alle dimensioni dell'area interna del box, esclusi i bordi e i pulsanti. Sono solo due dei numerosissimi parametri che è possibile modificare quando si crea un box sovrapposto con Colorbox. Per una lista completa rimandiamo alla pagina principale del progetto.
Per approfondire lo studio del codice sono disponibili per il download tutti i file usati nell'esempio.
CeeBox
Giunto alla versione 2.1.5, CeeBox di Colin Fahrion rappresenta per molti versi la soluzione più completa a disposizione dello sviluppatore. Supporta infatti l'incorporamento di qualunque tipologia di contenuto, compresi video e Flash (attraverso l'uso del plugin jQuery SWFObject). In effetti, come bem chiarisce l'autore sulla home del progetto, questo plugin è di fatto una combinazione tra Thickbox (altro eccellente plugin clone di Lightbox che però non supporta i filmati Flash) e Videobox, che invece fa del supporto al multimedia il suo punto di forza.
Tanta grazia si 'paga' ovviamente in termini di peso. Dei plugin jQuery presenti sulla Lightbox Clone Matrix, CeeBox è uno dei più pesanti, ma c'è da considerare che comprende anche SWFObject.
Il supporto è garantito per i principali browser, compreso IE6. Le opzioni di configurazione sono numerosissime, come per Colorbox. Rispetto a quest'ultimo l'aspetto grafico è in generale più elegante, ma ricordiamo che in entrambi i casi è possibile personalizzare il tutto agendo sui CSS.
Nell'esempio abbiamo innanzitutto creato una galleria mista, con un video e due immagini. Ecco il codice HTML:
<ul class="ceebox mixed {videoWidth:200}">
<li><a href="http://www.youtube.com/watch?v=G_5htGZkp9g" title="Balsa Man 2009 Video" >YouTube: video</a></li>
<li><a href="http://farm5.static.flickr.com/4123/4885491750_e677899eb2_z.jpg" rel="esempio" title="Zomercarnaval, Rotterdam - 1. Foto di Cesare Lamanna.">Rotterdam - 1</a></li>
<li><a href="http://farm5.static.flickr.com/4138/4884927731_b2c7091d01_z.jpg" rel="esempio" title="Zomercarnaval, Rotterdam - 2. Foto di Cesare Lamanna.">Rotterdam - 2</a></li>
</ul>Il raggruppamento degli elementi da associare nella galleria avviene semplicemente assegnando una classe 'ceebox' all'elemento parente che contiene i link agli elementi stessi. Nel nostro caso la classe è stata assegnata quindi all'elemento ul.
Per incorporare un video è sufficiente fare riferimento al suo URL. Lo script provvede in modo automatico ad associare il contenuto dell'URL ad una finestra popup comprensiva del video player Flash. Se il plugin di Adobe non è disponibile, viene presentato un messaggio di avviso. Su dispositivi come iPhone che non supportano Flash il link reindirizza sul sito originario (i video di YouTube si aprono nell'apposita app).
CeeBox suuporta al momento filmati in formato SWF e quelli presenti su questi siti: Google Video, YouTube, Metacafe, Vimeo, Dailymotion, Spike, iFilm, CNN, Facebook. Agendo sul codice è comunque possibile allargare il supporto ad altri servizi.
Per quanto riguarda il caricamento di contenuti esterni, se le pagine risiedono sullo stesso dominio viene effettuato un caricamento via Ajax (come nel nostro esempio). Se invece sono situate su server esterni, il caricamento avviene in un iframe.
Per concludere, dalla demo si può evincere quanto sia semplice caricare anche risorse SWF (i giochi per esempio).
Il pacchetto con gli esempi è disponibile per il download.
TopUp
Concludiamo questa breve panoramica con TopUp. Questo plugin si segnala per diverse ragioni.
A livello visuale è certamente quello più elegante. L'interfaccia del box, nelle tre diverse opzioni disponibili, è basata su quella di Mac OS X e in effetti chi usa il sistema operativo della Mela sentirà aria di famiglia.
Per l'aspetto grafico si è scelto di adottare come base jQuery UI, che va a sommarsi a jQuery Core. I risultati sono garantiti, ma in termini di peso è scelta che si paga. TopUp è in assoluto lo script più pesante tra quelli della Lightbox Clones Matrix, si va ben oltre i 250kb complessivi.
A livello di oggetti e contenuti, siamo all'altezza di CeeBox, non abbiamo davvero limiti: immagini, Flash, video, Ajax, tutto.
Nella demo una galleria mista con tre diverse modalità di attivazione del box e tre diversi tipi di contenuto. Ulteriori esempi sono disponibili sul sito ufficiale.
Sempre sul sito è possibile testare in modo approfondito il plugin modificando e impostando i vari parametri di configurazione.
Ma il fattore che distingue TopUp da tutto il resto della truppa è forse un altro: il meccanismo di inclusione. È ovviamente possibile scaricare la libreria, installarla sui nostri server e configurarla. Ma agli utenti viene offerta un'altra, ghiotta, opzione. Includere lo script attraverso una semplice chiamata ai server di TopUp. Lo script provvede automaticamente a caricare all'occorrenza tutte le dipendenze, a partire dalle immagini e dai fogli di stile.
Nel nostro esempio (disponibile anch'esso per il download) è possibile apprezzare la pulizia del codice nella sezione head se si adotta questa strategia di inclusione:
<script type="text/javascript" src="http://gettopup.com/releases/latest/top_up-min.js"></script>