Le immagini GIF animate sono popolari su Internet perché possono essere facilmente condivise e consumate piuttosto rapidamente. Usando l'HTML di base puoi incorporare le immagini in una pagina con animazione, senza fare affidamento su altre tecnologie. Concesso - ci sono plugin per animare sprite o sfondi - ma le GIF sono un concetto completamente diverso.
In questo tutorial voglio dimostrare come possiamo costruire una galleria di immagini che ottimizzi la visualizzazione di immagini animate. È possibile vedere una funzionalità molto simile su Giphy, che è anche il punto in cui ho scaricato le immagini per la mia demo. Sto codificando il mio metodo che non segue esattamente lo stesso processo di Giphy, ma il risultato finale è praticamente identico e funziona alla grande per tutti i browser moderni.
Demo dal vivo - Scarica il codice sorgente
Iniziare
Per prima cosa dovremmo scaricare una copia locale di jQuery e archiviarla insieme agli altri file di progetto. Sto creando una pagina indice insieme a un foglio di stile esterno chiamato styles.css.
Ora all'interno del corpo sto configurando una lista non ordinata di elementi dell'immagine. Poiché queste miniature hanno dimensioni diverse, il display sarà diverso in base alle dimensioni dell'immagine. Sto usando l'HTML larghezza e altezza attributi per l'impostazione di valori personalizzati. Dà alle immagini in miniatura più tempo da caricare in modo che la GIF stessa non tardino troppo.
Questo esempio di codice include solo due elementi dell'intero elenco. Per ogni immagine ho salvato una copia della GIF animata, insieme a una miniatura JPG solida. Questo oggetto miniatura è avvolto da un collegamento di ancoraggio che punta verso l'immagine GIF animata. Così ora, quando l'utente fa clic su una miniatura, porterà direttamente all'animazione.
Ma allo stesso modo possiamo usare questo href valore come variabile in jQuery. Quindi ogni volta che l'utente si posiziona sopra un'immagine in miniatura, sostituiamo semplicemente l'immagine src per visualizzare la GIF animata. Si noti che la miniatura e la GIF hanno entrambe le stesse dimensioni esattamente alle stesse dimensioni. In questo modo le nostre impostazioni di larghezza / altezza HTML dovrebbero funzionare perfettamente su entrambe le immagini.
Stili CSS
Non c'è un sacco di CSS da coprire, ma voglio spiegare la configurazione della mia galleria principale. #w è l'involucro esterno che è fissato a 750px di larghezza. Dentro abbiamo un #soddisfare div che è un contenitore interno per le miniature. Ho etichettato la lista non ordinata con un ID di #giflist per chiarire il mio selettore jQuery.
Sto solo disegnando gli elementi della lista interna in modo che possano fluttuare a sinistra uno accanto all'altro. Naturalmente una volta che l'immagine successiva è troppo grande, si scomporrà su una nuova riga. Vi è una spaziatura extra con margini per garantire un ampio spazio tra le miniature.
Inoltre, dato che tutti questi elementi interni sono flottati, l'elenco non ordinato in genere non ha valore di altezza. Sarebbe portato fuori dal flusso della pagina completamente senza l'uso di una classe .clearfix. Ovviamente potremmo aggiungere tratti di interfaccia più eleganti usando CSS3, ma queste proprietà fondamentali sono sufficienti per far funzionare la galleria senza intoppi.
Sostituzione dell'immagine con jQuery
Aggiungendo il pezzo finale a questo puzzle viene fornito con un piccolo gestore di eventi jQuery. In fondo alla mia pagina prima della chiusura tag abbiamo bisogno di aprire un nuovo blocco JavaScript. I collegamenti di ancoraggio che circondano le immagini non sono a livello di blocco e quindi non sono qualcosa che possiamo scegliere come target con un listener di eventi. Invece sto prendendo di mira le immagini stesse e eseguiamo una nuova funzione ogni volta che l'utente si posiziona su una di queste miniature di immagini.
Il metodo jQuery .hover () accetta due parametri di callback che ho scritto come funzioni. Il primo si innesca quando il mouse dell'utente entra nel selettore e la seconda funzione si attiva quando il mouse dell'utente lascia il selettore. Quando passano il mouse sopra l'immagine, dobbiamo estrarre il valore href corrispondente dal collegamento di ancoraggio esterno.
Quindi possiamo sostituire il valore dell'immagine src per visualizzare ora la nostra immagine GIF animata. Verrà ridimensionato in base agli attributi larghezza / altezza HTML, ma verrà anche completamente caricato nella memoria cache. Potresti aver notato che sto usando un attributo di dati HTML5 con il nome Dati-orig. Una volta che sostituiamo il valore dell'immagine src con la gif animata, non c'è un modo semplice per tornare alla miniatura.
Quindi, invece di salvare questo in una variabile, lo terremo solo all'interno del tag img.Ora, quando l'utente sposta il mouse dall'immagine, sostituiamo semplicemente la fonte con una copia del valore dell'origine dati. Questo rimette la miniatura non animata sul posto mentre la GIF animata è semplicemente un clic (o passa il mouse).
Demo dal vivo - Scarica il codice sorgente
Chiusura
L'uso di una libreria JavaScript come jQuery offre un eccellente supporto per i nuovi browser web. Una cosa da notare è sui dispositivi mobili, gli utenti dovranno toccare ciascuna miniatura per visualizzare l'animazione in una nuova finestra. Ma l'interfaccia utente è stata progettata per funzionare perfettamente per tutti i browser moderni e anche per versioni precedenti con JavaScript abilitato. Sentiti libero di scaricare una copia dei miei codici sorgente e vedere se è possibile implementare questo effetto su progetti web simili.