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.

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.

8 commenti su “PiroBox, visualizzazione di immagini made in Italy”

  1. Tommaso di ringrazio per questo articolo, mi hai fatto conoscere ltre che un interessante applicazione in jquery anche un web designer italiano di talento, tra la’ltro dai suoi disegni/lavori credo sia praticamente un’esperto non solo del web ma anche della carta ;).

    Lo contatterò nelle prossime settimane, ora sono pineo di lavoro fino al collo, per un’intervista su blographik per diffondere il web design italiano di qualità ;) .

    Grazie.

  2. Grande Pirolab, io ho avuto modo ti testare pirobox ed veramente eccezionale.. hai fatto un ottimo lavoro.. semplicità, fantasia e codice, non c’è che dire.
    gran bel lavoro!!!

  3. @Mirko: mi fa piacere averti aiutato nella scoperta :)

    @Diego: sei il benvenuto, grazie a te per il contributo.

  4. Ottimo plugin. Ci vogliono delle alternative a Lightbox e anch’io ne ho proposte parecchie nel mio blog. Pirobox mi sembra una delle migliori fra quelle che ho visto fin’ora..complimenti!

  5. Si grazie, davvero bello!
    Ho però un problema:
    come faccio a fare in modo che l’immagine della galleria di Pirobox che
    si apre copra un file .swf in flash che ho nella stessa pagina?
    Perchè il file di flash sta comunque in primo piano!
    Grazie,

    MAtteo

  6. @matteo: la soluzione al tuo problema credo sia l’aggiunta del parametro
    <param name=”wmode” value=”transparent” />
    al flash.