Lightbox vs. Thickbox

Da diversi mesi ormai è stato realizzato uno script che permette di realizzare gallerie di immagini in maniera semplice e molto accattivante: Lightbox.

Questo script permette di mostrare la versione ingrandita di un’immagine cliccando sull’anteprima, ma senza aprire fastidiose ed assolutamente inaccessibili finestre pop-up. Visto che è molto più semplice mostrare un esempio piuttosto che descrivere il funzionamento del javascript, visitando la pagina di Lightbox JS potete farvi un’idea chiara. Trovate anche le indicazioni su come integrare il tutto nelle vostre pagine.
Il lato positivo di questo script è che resta pienamente accessibile anche con javascript disattivato, infatti cliccando sull’immagine, il link per vedere l’ingrandimento continuerà a funzionare. La versione ingrandita sarà visualizzata nella stessa finestra del browser.

Da qualche tempo è stata rilasciata anche la versione 2.0 di Lightbox, che è leggermente più accattivante e con qualche funzione in più rispetto alla precedente, ma che non mi trova assolutamente d’accordo sulla sua efficienza: il peso di tutto lo script è vicino ai 100kb! Se pensate che la prima versione pesa un quinto di questa, vi potete rendere conto di come sia conveniente tenersi alla larga dall’upgrade.

E’ pratica diffusa fare attenzione al peso degli elementi nelle pagine per snellire i caricamenti e permettere una navigazione più veloce, dal mio punto di vista è impensabile introdurre uno script che richiede così tanta banda.

Ma negli ultimi giorni un altro fattore intacca la fama di Lightbox, ed è una variante che farà molto parlare di sè: Thickbox.

E’ uno script del tutto simile all’originale, con lo stesso intento, ma fa della versatilità il suo punto di forza. Infatti può essere usato sì per realizzare gallerie di immagini e mostrare versioni ingrandite di piccoli thumbnails, ma Thickbox può anche servire per far aprire veri e propri box di testo all’interno della pagina in cui ci si trova, contenenti codice html, senza usare pop-up e rimanendo pienamente accessibili.

Provare per credere, nella pagina in cui ci viene presentato lo script in tutte le sue varianti ci sono diversi esempi che meritano di essere visti. Notevole l’idea di utilizzare Thickbox per i form di login o registrazione. Se poi si aggiunge che il peso dello script è intorno ai 20kb i vantaggi sono evidenti.

Ho intenzione di fare diverse prove e magari integrare qualcosa del genere in questo sito, fatemi sapere cosa ne pensate e se avete sperimentato gli script, ogni contributo è il benvenuto.

Aggiornamento del 22 Maggio 2006: è stata rilasciata una nuova versione di Thickbox, che supporta ancora più tipologie di file, inoltre nel caso di immagini troppo grandi queste si ridimensionano da sole, ed ora il box non è più posizionato tramite la proprietà fixed quindi si sposta scorrendo la pagina. Da scaricare!

Vuoi far crescere il tuo progetto online?

Tommaso Baldovino

UX/UI Designer, professionista del web con più di 15 anni di esperienza su WordPress. Sono disponibile a seguire nuovi progetti dall'ideazione alla realizzazione finale. Scrivo ogni 2 settimane la mia newsletter.

9 commenti su “Lightbox vs. Thickbox”

  1. Io non ho ben compreso la differenza tra i due sistemi, a parte il peso, il risultato mi pare esattamente il medesimo.
    Dato che l’articolo è vecchio di due anni, che cosa succede oggi?
    si usa Light o trick?

  2. @fulvio: personalmente preferisco Thickbox, arrivato alla versione 3.1. Lo trovo più versatile di Lightbox e si appoggia alla libreria jQuery, che uso più spesso rispetto a Prototype.

  3. Grazie della segnalazione.
    dirotterò anche io allora su thickbox, dato che prediligo jQuery.

    Graazie e buon lavoro, ed un doveroso
    Bravo!!! hai un bel sito fatto bene e molto utile
    CIao

  4. ciao Tom,
    potesti darmi una mano con Thickbox? Non ci capisco molto di quste cose.
    Vorrei ottenere l’effetto “Gallery Images” che trovo qui http://www.jquery.com/demo/thickbox/ …ma nn mi funziona.
    Ho salvato 2 file js sul server:
    – thickbox.js
    – jquery.js
    + un file css e una gif

    Poi in html sulle foto ho inserito il link come dice la demo ma non funziona…i percorsi, i nomi dei file ecc sono giusti…dove sbaglio? Tieni presente che sono una schiappa clamorosa, nn dare nulla per scontato.
    Scusa il disturbo, intanto grazie e ciao.

    Gigi

  5. @gigi: per fare una galleria di immagini, devi mettere su ogni link class=”thickbox” e rel=”nome-della-galleria”, probabilmente è quello che ti manca.

  6. Salve Tom,
    io stavo cercando uno script tipo lightbox che abbia queste caratteristiche:
    -dimensioni massime intorno ai 10 kb o meno e bastato su jquery
    -piccola croce per chiudere l’immagine

    Insomma, di tutto il resto non mi importa (animazioni, etc. semmai giusto lo sfondo più scuro farebbe comodo). Conosci per caso qualche script di questo tipo? Non vorrei appesantire il mio sito inutilmente con script che fanno di più (gallerei e quant’altro). Grazie in anticipo!