Animerade GIF-bilder är populära på Internet eftersom de lätt kan delas och konsumeras ganska snabbt. Med grundläggande HTML kan du bädda in bilder på en sida som innehåller animering utan att förlita sig på någon annan teknik. Beviljas - det finns plugins för animering av sprites eller bakgrunder - men GIFs är ett helt annat koncept.
I denna handledning vill jag visa hur vi kan bygga ett bildgalleri som optimerar visning av animerade bilder. Du kan se en mycket liknande funktion på Giphy som också är där jag hämtade bilderna för min demo. Jag kodar för min egen metod som inte exakt följer samma process som Giphy - men slutresultatet är praktiskt taget identiskt och fungerar bra för alla moderna webbläsare.
Live Demo - Hämta källkod
Komma igång
Först bör vi hämta en lokal kopia av jQuery och lagra den här tillsammans med de andra projektfilerna. Jag skapar en indexsida tillsammans med ett externt stilark som heter styles.css.
Nu inuti kroppen lägger jag upp en oorderad lista över bildobjekt. Eftersom dessa miniatyrbilder är olika storlekar, kommer visningen att se annorlunda ut beroende på bildens mått. Jag använder HTML bredd och höjd attribut för att konfigurera anpassade värden. Det ger miniatyrbilderna extra tid att ladda, så att GIF själv inte lagrar för mycket.
Detta kodprov innehåller endast två objekt från hela listan. För varje bild har jag sparat en kopia av den animerade GIF, tillsammans med en solid JPG-miniatyrbild. Detta miniatyrobjekt är inslaget av en ankarlänk som pekar mot den animerade GIF-bilden. Så nu när användaren klickar på en miniatyrbild kommer det att leda direkt till animeringen.
Men på samma sätt kan vi använda detta href värde som en variabel i jQuery. Så när användaren lägger sig över en miniatyrbild, ersätter vi helt enkelt bild src för att visa den animerade GIF. Observera att miniatyren och GIF-formatet är båda storlekarna i exakt samma dimensioner. På så vis ska våra HTML-bredd / höjdinställningar fungera perfekt på endera bilden.
CSS-stilar
Det finns inte mycket CSS att täcka men jag vill förklara inställningen för mitt kärngalleri. #W är den yttre omslaget som är fast vid 750px bredd. Inuti har vi a #innehåll div som är en inre behållare för miniatyrerna. Jag har märkt den oordnade listan med ett ID på #giflist för att klargöra min jQuery-väljare.
Jag stylar bara de inre listobjekten så att de kan flyta till vänster bredvid varandra. Naturligtvis när nästa bild är för stor kommer den att bryta ner på en ny linje. Det finns lite extra avstånd med marginaler för att säkerställa gott om utrymme mellan miniatyrer.
Också eftersom alla dessa inre element floats, skulle den oordnade listan normalt inte ha något höjdvärde. Det skulle tas ut ur sidflödet helt utan att använda en .clearfix-klass. Självklart kan vi lägga till mer snygga gränssnittsegenskaper med CSS3 men dessa grundläggande egenskaper är tillräckligt för att galleriet ska fungera smidigt.
Bildutbyte med jQuery
Lägga till det sista stycket i det här pusslet kommer med en liten jQuery-händelsehanterare. På botten av min sida före stängningen tagg måste vi öppna ett nytt JavaScript-block. Ankarlänkarna som omger bilderna är inte blocknivå och så är de inte något vi kan rikta oss till med en händelselyssnare. Istället riktar jag mig mot bilderna själva, och vi kör en ny funktion varje gång användaren svänger över en av dessa miniatyrbilder.
Metoden jQuery .hover () innehåller två återuppringningsparametrar som jag har skrivit som funktioner. Den första kommer att trigga när användarens mus kommer in i väljaren, och den andra funktionen utlöses när användarens mus lämnar väljaren. När de först svävar ovanpå bilden måste vi dra ut motsvarande href-värde från ytterförankringslänken.
Då kan vi ersätta bild src-värdet för att nu visa vår animerade GIF-bild. Den kommer att formas i enlighet med HTML-bredden / höjdattributen, men den kommer också att vara fullt laddad i cacheminnet. Du kanske har märkt att jag använder en HTML5-dataattribut med namnet data orig. När vi väl ersätter image src-värdet med det animerade gifet finns det inget enkelt sätt att komma tillbaka till miniatyrbilden.
Så istället för att spara detta till en variabel behåller vi det bara lokalt inom img-taggen.Nu när användaren flyttar musen bort från bilden ersätter vi helt enkelt källan med en kopia av data-orig-värdet. Detta sätter den icke-animerade miniatyrbilden på plats medan den animerade GIF bara är ett klick (eller svävar) bort.
Live Demo - Hämta källkod
Stängning
Användningen av ett JavaScript-bibliotek som jQuery ger utmärkt stöd för nyare webbläsare. En sak att notera är på mobila enheter, användare måste trycka på varje miniatyrbild för att visa animationen i ett nytt fönster. Men gränssnittet har utformats för att fungera perfekt för alla moderna webbläsare och även äldre äldre versioner med JavaScript aktiverat. Du kan ladda ner en kopia av mina källkoder och se om du kan implementera denna effekt på alla liknande webbprojekt.