Gallerific è un plugin di Jquery pensato per la visualizzazione di gallery di immagini, con numerose caratteristiche come la navigazione tramite thumbnail, l’effetto slideshow e la possibilità di integrazione con il plugin di history. Partendo da uno degli esempi proposti nel pacchetto di installazione, ho apportato qualche modifica alla struttura della pagina html ed al codice javascript per visualizzare più di una gallery nella stessa pagina.
La pagina che dovevo realizzare consisteva in una multi gallery di foto di quadri, di cui però ne doveva essere visibile una sola alla volta, con la possibilità ovviamente di sceglierne un’altra tra le varie disponibili ma senza cambiare pagina. La modifica effettuata sull’esempio proposto da Gallerific (quello relativo al caso di thumb con dimensioni differenti) consiste essenzialmente in tre punti:
- numerare progressivamente i blocchi div che vengono utilizzati dal codice javascript presente in pagina per associarli ad una gallery specifica
<div class=”navigation-container”><div id=”thumbs0″ class=”navigation”>… …<div class=”slideshow-container”><div id=”controls0″ class=”controls”></div><div id=”loading0″ class=”loader”></div><div id=”slideshow0″ class=”slideshow”></div></div><div id=”caption0″ class=”caption-container”>… - includere i blocchi html relativi alla singola gallery in un div nascosto, ad eccezione del primo, che verrà quindi visualizzato inizialmente
<div id=”nc1″ style=”display:none;”><div class=”navigation-container”>… - adattare il codice javascript eseguito in pagina che inizializza la gallery per funzionare in modalità multi-gallery, iterando sui blocchi specifici e sfruttando la numerazione progressiva che era stata assegnata ai singoli elementi.
Infine, ho aggiunto una semplice select all’inizio della pagina con la quale visualizzare una specifica gallery tra quelle disponibili. L’esempio realizzato è visibile nel sito del pittore Giuseppe Iovio a questo indirizzo: http://www.giuseppeiovio.it/gallery/ . E’ chiaro che un numero elevato di gallery sulla stessa pagina implica un tempo di caricamento maggiore della stessa, a causa delle immagini precaricate.