Bädda in animerade GIF-filer som Facebook med jqGifPreview
Twitter och Facebook har många människor dela animerade GIF-filer dagligen. Om dessa är alla auto-spelade kan de vara grymma i ett flöde.
Båda näten kommer runt detta med a Klicka för att förhandsgranska funktionen för alla GIFs. Detta låter användaren välja vilka animationer de vill se genom att välja när du vill starta / stoppa animeringen.
Med jqGifPreview-plugin, Du kan ta med samma funktionalitet till din webbplats.
Detta gratis jQuery-plugin fungerar på alla GIF-filer på sidan, eller kan specifikt rikta sig mot något som du vill ha. Det är en fantastisk resurs men tar lite tid att sätta upp.
En pausad GIF är verkligen bara en ram av animationen, visas på sidan.
Tyvärr, det här plugin gör inte Dra automatiskt en statisk bild från GIF till dig. Men du kan uppnå detta med hjälp av PHP eller något annat backend-språk, så med lite kod kan det automatiseras.
Detta plugin använder ett data- * attribut till lagra GIF-bildplatsen. När användaren klickar på bilden laddas den automatiskt in i src attribut på bilden och visas på skärmen.
Enkel, effektiv och definitivt en snygg effekt! Allt du behöver är CSS / JS-filerna för det här pluginet som du kan Dra direkt från GitHub. Och det gör du självklart behöver en kopia av jQuery, för.
Därifrån ställer du upp din bild så här:
Den huvudsakliga src attribut ska innehåller den statiska bilden. Du kan antingen bygga ett skript för att generera det, eller du kan manuellt redigera och ladda upp ett statiskt skott för varje GIF.
De data gif attribut har den riktiga animerade GIF-filen och de byter på klicka om du rikta dig mot huvudbildsklassen (i det här fallet är det .myImg). Nu behöver du bara en rad jQuery för att få allt att fungera:
$ ( "MyImg.") JqGifPreview ().
Definitivt en av de coolaste jQuery-plugins jag har sett den här månaden och det är ganska lätt att ställa in.
Du kan lära dig mer genom att besöka GitHub sida och det finns också en live demo förhandsgranskning värd på utvecklarens webbplats.
