Legg inn animerte GIFs som Facebook med jqGifPreview

Twitter og Facebook har mange mennesker dele animerte GIFer daglig. Hvis disse er alle auto-spilte, kan de være grusomme i en feed.

Begge nettverkene kommer rundt dette med a Klikk for å forhåndsvise funksjonen for alle GIFs. Dette lar brukeren velge hvilke animasjoner de vil se ved å velge når du skal starte / stoppe animasjonen.

Med jqGifPreview-plugin, Du kan bringe samme funksjonalitet til nettstedet ditt.

Dette gratis jQuery-plugin Fungerer på alle GIF-er på siden, eller kan spesifikt målrette mot alt du vil ha. Det er en fantastisk ressurs, men det tar litt tid å sette opp.

En pauset GIF er egentlig bare en ramme av animasjonen, vises på siden.

Dessverre, dette pluginet gjør ikke Trekk automatisk et statisk bilde fra GIF for deg. Men du kan oppnå dette ved hjelp av PHP eller et annet backend-språk, så med litt kode kan dette automatiseres.

Denne plugin bruker et data- * attributt til lagre GIF-bildeposisjonen. Når brukeren klikker på bildet, lastes det automatisk inn i src Attributt av bildet og vises på skjermen.

Enkel, effektiv og definitivt en fin effekt! Alt du trenger er CSS / JS-filene for dette pluginet du kan Trekk direkte fra GitHub. Og selvfølgelig vil du trenger en kopi av jQuery, også.

Deretter setter du opp bildet ditt slik:

Hoved src attributt skal inneholder det statiske bildet. Du kan enten bygge et skript for å generere det, eller du kan manuelt redigere og laste opp et statisk skudd for hver GIF.

De data-gif Egenskap har den virkelige animerte GIF og de bytter på klikk hvis du mål på hovedbildeklassen (i dette tilfellet er det .myImg). Nå, alt du trenger er en linje av jQuery for å få alt til å fungere:

 $ ( "MyImg".) JqGifPreview (.); 

Definitivt, en av de kuleste jQuery-plugins jeg har sett denne måneden, og det er ganske enkelt å sette opp.

Du kan lære mer ved å besøke GitHub side og det er også en live demo forhåndsvisning vert på utviklerens nettsted.