Tag: thickbox

Shadowbox: soluzione Javascript per gallerie di immagini

Analisi di Shadowbox, una soluzione Javascript che potrebbe definire un nuovo standard per la realizzazione di gallerie di immagini.

Le gallerie di immagini sul web occupano senza dubbio un importante spazio, soprattutto per la varietà di soluzioni javascript che ci sono a disposizione per implementarle.

Gli script più famosi sono sicuramente Lightbox e Thickbox, che ho confrontato in passato. Da qualche mese però è disponibile Shadowbox, una soluzione che potrebbe definire un nuovo standard per la realizzazione di gallerie di immagini.

Queste le caratteristiche:

  • Standard-compliant: il codice HTML utilizzato è valido
  • Cross-browser: supporta tutti i principali browser, da IE6 ad Opera passando per Firefox e Safari
  • Cross-platform: è adattabile a molti framework javascript (Prototype, jQuery, MooTools..) tramite gli adapters, che indicano a Shadowbox quale metodo utilizzare
  • Aspetto personalizzabile: tramite delle skin CSS è semplice modificare l’aspetto delle finestre
  • Multiformato: supporta immagini, filmati QuickTime, Windows Media Player, Flash, Flash Video e HTML
  • Configurabile: sono disponibili decine di opzioni di personalizzazione per cambiare facilmente colori, interfaccia e tempi di esecuzione

Quello che mi ha colpito maggiormente è proprio il supporto a diversi framework, che consente di risparmiare codice, ridurre i tempi di caricamento e integrare perfettamente Shadowbox nel proprio sito.

Se volete approfondire l’argomento vi rimando al sito ufficiale, dove sono disponibili anche varie demo.

Per valutare invece le altre soluzioni per realizzare gallerie di immagini, potete leggere il post “Gallerie di immagini, adesso c’è anche Smoothbox”, dove ho raccolto varie segnalazioni.

Thickbox 3: ecco le novità

Thickbox 3Thickbox è un Javascript di cui ho già parlato in passato, che consente di aprire immagini, iframe e nuove pagine all’interno della stessa finestra in cui si naviga.

La novità di questi giorni è l’uscita della versione 3, a poco tempo dalla versione 2.1. Dal blog dell’autore, ecco l’elenco dei principali miglioramenti:

  • Se non viene impostata una dimensione per l’apertura di contenuto inline, iframe o AJAX, la finestra avrà di default 630px di altezza e 440px di larghezza
  • Il codice è stato ripulito utilizzando JSLint, il file thickbox.js è stato compresso ulteriormente
  • Aggiornamento per utilizzare la versione 1.1.2 di jQuery
  • L’immagine di caricamento è stata cambiata ed ora viene precaricata
  • Lo script ora funziona con le mappe immagini e con gli elementi input dei form oltre che con i semplici links (il tag a)
  • Maggiore integrazione con AJAX, per caricare nuovi contenuti in una finestra di Thickbox già aperta

Le novità sono rilevanti, probabilmente interesseranno di più chi vorrà utilizzare questo Javascript integrandolo con AJAX. E’ una valida alternativa ad altri script analoghi, spesso molto più pesanti: l’attuale versione pesa solo 10kb nella versione compressa, a cui vanno aggiunti circa 20kb di jQuery.

Potete trovare esempi, guide per l’installazione di Thickbox 3 ed ovviamente i file da scaricare sul sito ufficiale.

ThickBox 2.0: addio Lightbox?

Mentre molti si stanno ancora godendo le meritate vacanze in questo Agosto 2006, una novità è arrivata in rete: ThickBox versione 2.0!

Per chi non conoscesse ThickBox, o il più famoso Lightbox, rimando ad un post di Aprile 2006 dove avevo descritto i due javascript commentando pregi e difetti. Riassumendo, sono due soluzioni eleganti per mostrare in particolare foto ed immagini senza l’uso di pop-up.

Le novità di ThickBox 2.0 sono considerevoli, ed il peso resta ancora una volta inferiore agli script basati sulle librerie prototype (come appunto Lightbox): solo 27kb se si utilizzano file compressi.

Si possono finalmente vedere immagini anche in gallerie, contenuti inline o all’interno di iframes, il tutto con il massimo rispetto per gli standard dell’accessibilità. Vedere le demo sul sito ufficiale di ThickBox per credere! Trovate allo stesso indirizzo tutte le informazioni necessarie per installare lo script e farlo funzionare.
Adesso vorrei conoscere un valido motivo per continuare ad utilizzare Lightbox…

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!