JavaScript  »  Articoli  »  JQuery 

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.

Figura 1 (click per ingrandire)

Figura 2

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.

Altri articoli

Altre guide

Altre newsletter