PiroBox, visualizzazione di immagini made in Italy

Un plugin per jQuery alternativo a Lightbox, ideato dal Web Designer italiano Diego Valobra.

Uno screenshot di PiroboxSe avete la necessità di gestire delle gallerie di immagini la scelta è ormai ampia: esistono infatti numerose soluzioni che spesso si appoggiano a librerie JavaScript esistenti. Quella più famosa è Lightbox, seguita da Thickbox, ma su queste pagine ho parlato anche di altri script come Smoothbox e Shadowbox.

Ha deciso di avventurarsi in questo contesto un Web Designer italiano, Diego Valobra, che sfruttando un framework diffuso come jQuery ha realizzato un plugin pronto all’uso.

La sua creazione si chiama Pirobox: sul sito potete trovare alcuni semplici esempi, in due varianti di colore (bianco e nero). Mantenendo tutte le caratteristiche dei suoi predecessori, a mio parere è interessante la possibilità di avere i controlli per scorrere avanti e indietro posizionati esternamente rispetto alle immagini, un dettaglio che può fare la differenza.

Se volete saperne di più sul suo creatore, ho chiesto a Diego i motivi che l’hanno spinto a realizzare un clone di Lightbox, questa è stata la sua risposta:

Qualche mese fa ho iniziato ad interessarmi al framework jQuery, non tanto per sfruttare il “già fatto”,visto che di plugin come sai è piena la rete, quanto per creare effetti su misura ai siti su cui lavoro.

Credo fermamente che la creatività di un web designer non debba limitarsi al creare un layout in psd, tagliarlo, montarlo e farne il debug, ma debba spaziare attraverso il web developing il più possibile. Con questo intendo dire che i codici usati per rendere visibile ciò che si è creato in Photoshop o in Illustrator, devono stare al web designer come la grammatica sta ad uno scrittore. Mi è sembrato quindi inevitabile fare una full immersion nel mondo di ajax, e Pirobox ne è il frutto.

Voglio aggiungere che non sono un programmatore, ma essenzialmente un web designer, per questo nel creare Pirobox ho dovuto supplire alla mancanza di nozioni javascript con la mia creatività. Faccio un’esempio.
Per creare la navigazione nella gallery, quindi i tasti next e previous, tutti… e dico tutti quelli che prima di me hanno creato una qualsiasi tipo di image gallery hanno usato un array con conseguente ciclo for, incremento o decremento dei numeri relativi alle immagini. Io ho semplicemete aggirato l’ostacolo in maniera creativa, senza voler copiare nessuno (sarebbe stato troppo facile), ho  trovato un escamotage che consiste nell’aggiungere nell’html, in fase iniziale di script, due elementi lista:

<li class="begin"></li>
<li class="end"></li>

uno all’inizio della lista che uso per il set di immagini e l’altro alla fine. Questo permette il controllo sulla lista di immagini evitando di usare un array.

Per l’incremento e il decremento ho usato un altro trucco che consiste nell’aggiungere agli elementi lista della gallery adiacenti all’immagine selezionata due classi start e back, che servono per la navigazione. Ovviamente ci sono anche dei controlli sul primo e sull’ultimo elemento della lista grazie ai due <li></li> aggiunti in precedenza, così una volta arrivati all’ultima immagine il tasto next sparisce, stessa cosa per il tasto prev.

L’unico inconveniente, se così possiamo dire visto che il risultato è semanticamente giusto, è che il set di immagini con Pirobox funziona solo se viene usata una lista.

Creare Pirobox è stato stimolante, istruttivo e cosa più importante molto divertente.

Potete vedere il portfolio di Diego su Pirolab.it, e tra i suoi vari lavori troverete anche DiegoValobra.com, un sito che avevo già notato in passato viste le numerose segnalazioni su diverse Web Gallery.

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.

Gallerie di immagini, adesso c’è anche Smoothbox

Una schermata di esempio con SmoothboxHo parlato più volte di Mootools e delle possibilità che offre soprattutto dopo l’uscita della versione 1.0. Mi sono accorto che si sta diffondendo sempre più, ed è recente una conversione di Thickbox proprio per questa libreria, con il nome Smoothbox.

Thickbox è un Javascript che consente la creazione di gallerie di immagini ed anteprime, ne avevo parlato in questo articolo. Utilizza jQuery, ma avere più possibilità a seconda del framework che si decide di usare sul proprio sito non è un male, anzi. Infatti metterne insieme più di uno non è raccomandabile per possibili problemi di compatibilità, ma soprattutto per il peso delle pagine.

Adesso quindi se volete usare un effetto per l’ingrandimento delle immagini o per creare delle gallerie, le scelte sono molteplici:

Scegliete la soluzione che preferite e che più si adatta alle vostre esigenze, la raccomandazione è di appoggiarsi sempre su una libreria Javascript ridotta all’essenziale per evitare caricamenti inutili ai visitatori.

Se avete altri script simili da segnalare non esitate a farmelo sapere tramite i commenti o il modulo contatti, le risorse sull’argomento sono infinite!

Aggiornamento: sono arrivate le prime segnalazioni interessanti, le integro nell’articolo soprattutto per facilitarne la lettura.

  • Simone raccomanda TripTracker, che consente la creazione di uno slideshow senza troppe difficoltà. Il Javascript pesa circa 30kb e per siti commerciali richiede l’acquisto di una licenza, ma per un sito personale è ottimo.
  • LeoB segnala lo script Slimbox, che è una conversione di Lightbox v2 sempre per la libreria Mootools in soli 7kb. Da provare!

Aggiornamento #2:

  • Ancora LeoB segnala Smoothgallery e Slideshow, due soluzioni alternative per gallerie di immagini con Mootools.
  • Pirolab invece segnala Clearbox, risorsa interessante anche se in ungherese.

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!