Ente accreditato Regione Veneto n.4271

Immagini responsive con TouchTouch Gallery

Come costruire una gallery moderna e full responsive con una famosa libreria jQuery

Pubblicato da Simone // 14 aprile 2016 // 259 visualizzazioni

libreria touch touch

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.

touch1

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.

touch2

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.

touch3

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.

touch4

Il risultato che andiamo a visualizzare è il seguente

touch5

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.

touch6

e al click del mouse sulla nostra anteprima potremo finalmente visualizzare l’effetto creato.

touch7

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.

touch8

Ora siete pronti per creare le vostre fantastiche gallery responsive.

Diventa un esperto professionista del web con il nostro corso Web Design

Topic:

Send this to a friend