Un ottimo plugin per la visualizzazione di immagini, realizzato in Italia.
Pirobox è 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.
Un plugin per jQuery alternativo a Lightbox, ideato dal Web Designer italiano Diego Valobra.
Se 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.
Le migliori soluzioni JavaScript per realizzare gallerie di immagini accessibili, utilizzando i framework jQuery e Mootools.
Dall’uscita di Lightbox le soluzioni JavaScript per realizzare gallerie di immagini si sono moltiplicate: le scelte a disposizione sono innumerevoli, ma non è solo l’aspetto estetico quello che conta. Molto spesso gli script disponibili in rete sono fin troppo pesanti per il loro scopo, o non tengono presenti gli standard minimi per quanto riguarda l’accessibilità dei contenuti.
In questo articolo troverete una selezione di alcuni effetti che consentono di creare gallerie di immagini accessibili: non intrusivi, degradano nel modo giusto se JavaScript è disabilitato, e si appoggiano a framework già collaudati come jQuery e Mootools. Potrebbero essere migliorati ulteriormente, ma sono un’ottima base di partenza.
Soluzione basata sulla libreria Mootools, consente di creare slideshow di immagini mettendo a disposizione vari parametri come lo scorrimento automatico ed il tempo riservato ad ogni fotografia. E’ possibile anche avere più set di immagini nella stessa galleria: funzione comoda per risparmiare spazio nella pagina.
In assenza di JavaScript, le immagini appaiono comunque precedute da titolo e descrizione. Il difetto riguarda i controlli, non è infatti possibile scorrere le foto da tastiera.
Un buon set di effetti a disposizione anche per questo script basato sul framework Mootools, che può essere a sua volta esteso con altre funzionalità, come l’anteprima delle immagini con Lightbox.
Notevole la realizzazione degli esempi: disabilitando JavaScript le funzionalità restano le stesse, spariranno semplicemente le transizioni. Ottimi anche i controlli, non c’è alcun problema a spostarsi tra le immagini utilizzando anche la tastiera.
Probabilmente il migliore tra quelli presentati, questo script si basa su jQuery e pesa solamente 4kb. Non è intrusivo, degrada senza problemi in assenza di JavaScript o con i CSS disabilitati e può essere personalizzato facilmente anche nell’aspetto. Le immagini sono organizzate in una lista nel codice HTML: una soluzione ottimale.
Notevole anche l’efficienza dello slideshow, perchè le foto vengono caricate e mostrate solo quando disponibili, evitando attese nel momento dell’interazione.
Se conoscete altre soluzioni accessibili per la creazione di gallerie di immagini segnalatele nei commenti, è sempre utile conoscere le migliori risorse in questo ambito. Potete trovare altri script nel mio precedente post dedicato a Lightbox ed ai suoi cloni: se comunque volete uno slideshow accessibile il mio consiglio è di partire dagli script appena illustrati.
Ho 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.
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…
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!
Pirobox è 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:
