Nei siti web odierni è assolutamente vietato creare delle gallerie/link alle immagini senza che queste si aprano poi con un effetto tra quelli comunemente proposti dagli sviluppatori di librerie javascript; tra queste mi sento di consigliare una tra le più diffuse e gestibili, completamente full responsive e open source, che risponde al nome di TouchTouch gallery.
E’ possibile scaricare l’intera libreria con le modalità di esempio a questo indirizzo:
https://github.com/martinaglv/touchTouch
Vediamo ora come implementare il tutto nei nostri siti web custom.
Come prima cosa andiamo a inserire l’intera cartella TouchTouch nella root principale del nostro sito; questa include le immagini per la gestione della gallery, nello specifico le frecce direzionali e il loader per il caricamento, e i due file necessari al suo funzionamento ovvero, come vediamo in figura, il file css con la formattazione e il file js con lo script che richiameremo poi nelle singole pagine.
Vuoi imparare a creare siti web competitivi sul mercato?
Guarda cosa ti offre il corso Web Design
Per questo demo ci andiamo a preparare due immagini in versione large e le corrispettive small, operazioni queste che in cms come WordPress vengono eseguite in automatico al caricamento. Useremo le immagini small per la visualizzazione a browser e le immagini large per la visualizzazione TouchTouch una volta cliccato.
Ricordiamo che per il funzionamento corretto della struttura è anche necessario implementare il file jQuery.min.js o mediante file fisico o con l’ausilio dei CDN di Google. Possiamo ora richiamare i file css e js della libreria come da esempio.
Passiamo ora al caricamento vero e proprio delle immagini con il relativo link. La libreria, seppur non obbligatoriamente, ci suggerisce l’utilizzo del marcatore HTML figure per l’inserimento. Naturalmente la formattazione complessiva della pagina e delle relative immagini è a discrezione del designer in base al progetto.
Vediamo in figura che andiamo a caricare la versione large come valore di href e la versione small nella sorgente di img.
Il risultato che andiamo a visualizzare è il seguente
Andiamo ora a inserire lo script della libreria che utilizza i selettori css per applicare l’effetto, in questo caso, a tutti i marcatori a presenti nel sito all’interno di un marcatore figure.
e al click del mouse sulla nostra anteprima potremo finalmente visualizzare l’effetto creato.
Uno dei vantaggi di questa libreria è la gestione della visualizzazione full responsive delle immagini in apertura senza la necessità di ulteriori interventi da parte nostra se non quelli per la grafica front-end. Se proviamo infatti a ridurre la larghezza della scheda del browser potremmo vedere da soli come queste si vadano ad adattare perfettamente alla risoluzione del dispositivo sia questo un tablet piuttosto che uno smartphone.
Ora siete pronti per creare le vostre fantastiche gallery responsive.
Ancora nessun commento