Pirobox: la nuova versione

Un ottimo plugin per la visualizzazione di immagini, realizzato in Italia.

Screenshot di Pirobox in azionePirobox è un plugin di jQuery per la creazione di gallerie di immagini. E’ una creazione tutta italiana, e ne avevo già parlato in passato su questo sito. Mi ha fatto molto piacere scoprire che Diego Valobra, il suo creatore, ne ha appena rilasciato la nuova versione con alcuni miglioramenti:

  • diminuito il peso del codice, per una maggiore velocità di caricamento: da 25kb a 11kb
  • implementata la navigazione da tastiera
  • controllo sui link errati, che non fermano lo script ma visualizzano un’immagine di avviso
  • riposizionamento automatico delle immagini durante lo scroll della pagina
  • png fix per Explorer 6

Tutto questo si aggiunge all’ottimo lavoro che Diego aveva già fatto. Sono notevoli anche le opzioni di personalizzazione: tre skin sono già pronte (nera, bianca e trasparente), e c’è la possibilità tramite alcuni parametri di decidere la posizione delle frecce di scorrimento nelle gallerie di immagini (alla base dell’immagine o ai lati della pagina).

Se nel vostro prossimo progetto avete bisogno di uno script simile a Lightbox per mostrare anteprime di immagini, provate Pirobox. Alcuni dettagli come la navigazione da tastiera possono fare la differenza, e l’implementazione non richiede tag aggiuntivi nel codice: è sufficiente una classe html per abilitare lo script, in modo semplice e pulito.

Per vedere le demo e le caratteristiche di questo plugin in dettaglio vi rimando alla pagina ufficiale di Pirobox.

Librerie JavaScript: jQuery o MooTools?

Una guida alla scelta della migliore libreria JavaScript per il vostro sito.

Il primo problema da considerare per chi vuole sfruttare le potenzialità di JavaScript è la scelta del framework a cui appoggiarsi. Le soluzioni a disposizione sono tante: spesso può anche non servire sfruttare un’intera libreria, ma per progetti complessi a volte è la scelta più conveniente.

Tra le varie possibilità, jQuery e MooTools sono due tra i migliori framework da considerare. Per facilitarvi, consiglio la lettura di questa pagina, che vuole aiutare a trovare una risposta alla domanda: “quale scelgo?”.

Le caratteristiche dei due framework

jQuery – sito ufficiale

  • dimensione della libreria (solo Core): 55.9kb
  • centinaia di plugin disponibili su plugins.jquery.com, più innumerevoli altri disponibili in rete
  • community diffusa e molto frequentata
  • facilità di apprendimento

MooTools – sito ufficiale

  • dimensione della libreria (solo Core): 64.3kb
  • qualche decina di plugin ufficiali su mootools.net/more, più altri non ufficiali (meno rispetto a jQuery) disponibili in rete
  • miglior mantenibilità del codice
  • facilità di riutilizzo

Quale utilizzare?

La scelta può essere sintetizzata in una frase:

jQuery focuses on expressiveness, quick and easy coding, and the DOM while MooTools focuses on extension, inheritance, legibility, reuse, and maintainability.

E’ questa la giusta chiave di lettura per iniziare a lavorare con uno dei due framework. jQuery è probabilmente più facile da imparare ed è semplice da gestire, ma potrebbe presentare qualche problema di troppo per il riutilizzo del codice ed il suo mantenimento. MooTools ha meno difficoltà da questo punto di vista, ma è più complesso da imparare.

Alcuni esempi pratici

Per avere un’idea non solo teorica dei due framework, questi sono alcuni siti che utilizzano l’uno o l’altro. Sono presenti slider, carousel, accordion e menu con navigazione a tab: i risultati sono in ogni caso ottimi.

Web Designer Wall – jQuery

Web Designer Wall

Marius Roosendaal – Mootools

Marius Roosendaal

Viget Labs – jQuery

Viget Labs

Vimeo – Mootools

Vimeo

Komodo Media – jQuery

Komodo Media

Macheist – Mootools

Macheist

Per quanto mi riguarda su tomstardust.com utilizzo MooTools, ma per altri progetti ho sfruttato anche jQuery, soprattutto per i numerosi plugin a disposizione. Sono entrambe due ottime librerie: a questo punto la scelta dipende solo dalle vostre necessità.

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.