Oggi vediamo come creare una galleria di immagini con aiuto di un plugin di jQuery
Indice articolo
L'idea è che creeremo una galleria di immagini, o semplicemente una lista di immagini per le quali determineremo il numero di righe e colonne che verranno automaticamente disposte in una griglia.
Le immagini cambieranno con diversi effetti, transizioni e ritardi . Avremo solo bisogno di determinare la larghezza di questo blocco con le immagini per mostrare corettamente su varie dispositivi
Una galleria del genere funzionerà bene come lo sfondo o anteprima della pagina di un sito web, poiché potremo come avevo gia detto mostrare tante immagini in poco spazio in realtà riempire per esempio la prima scremata visibile al utente -ospite.
Come esempio della nostra galleria useremo foto di mobili per presentare il nostro lavoro
La nostra struttura html e molto semplice
Jquery
E dopo aver creata la struttura dobiamo agiungere il motore della nostra galleria un plugin jQuery che si chiama “gridrotator “ che girera le nostre immagini rachiusi nella scatola con l id ri-grid(in realta puo avere qualsiasi nome )
Non dimentichiamo di inserire sulla nostra pagina o collegare dalla CDN la libreria di jQuery altrimenti non funzionerà, come farlo leggi qui e anche plugin gridrotator che troverà come allegato a questo post
Vediamo anche come gestire le impostazioni della nostra galleria
Definendo grandezza della intera galleria ( che include tutta la rette di immagini ) devi tenere presente che al interno della cella sara mostrata immagine piu piccola rispetto originale che si trova nella apposita cartella sul sito.
Supponiamo che hai 15 immagini e hai diviso la tua galerria in 5 colonne e 2 righe. Questo ti permnette di crere e mostrare subito 10 immagini con 5 che saranno usati per cambiare galleria.
Non dimenticare di inserire sulla tua pagina gli script necessarie: Libreria jQuery , jquery.gridrotator.js e un altro script che si chiama modernizr e la sua versione creata manualmente in base dei parametri necessarie modernizr.custom.26633.js
Tutti gli fail necesarie per creare galeria potresti scaricare qui sotto l'articolo.
E ora vediamo la nostra galleria in funzione
Esempio animazione "random" / 90% larghezza / viene cambiata 3 immagini nello stesso momento / 600 ms fra inizio cambiamenti
Direi che è tutto! Abbiamo creato una galleria di immagini piuttosto attraente con effetti meravigliosi. Penso che ti sia piaciuto.