Embed animerede GIF'er som Facebook med jqGifPreview

Twitter og Facebook har mange mennesker deler animerede GIF'er daglige. Hvis disse er alle auto-afspilte, kunne de være grusomme i et feed.

Begge netværk omgår dette med a click-to-preview-funktionen for alle GIF'er. Dette lader brugeren vælge hvilke animationer de vil se ved at vælge, hvornår man skal starte / stoppe animationen.

Med jqGifPreview plugin, Du kan bringe den samme funktionalitet til din hjemmeside.

Dette gratis jQuery-plugin fungerer på alle GIF'er på siden, eller kan specifikt målrette mod noget, du vil have. Det er en fantastisk ressource, men det tager lidt tid at oprette.

En pauset GIF er virkelig bare en ramme af animationen, vises på siden.

Desværre er dette plugin gør ikke Træk automatisk et statisk billede fra GIF'en for dig. Men du kan opnå dette ved hjælp af PHP eller et andet backend-sprog, så med en smule kode kan dette automatiseres.

Dette plugin bruger en data- * attribut til gemme GIF-billedets placering. Når brugeren klikker på billedet, indlæses det automatisk i src attribut af billedet og vises på skærmen.

Enkel, effektiv og helt sikkert en pæn effekt! Alt du behøver er CSS / JS-filerne til dette plugin, som du kan Træk direkte fra GitHub. Og selvfølgelig vil du brug for en kopi af jQuery, også.

Derefter opretter du dit billede som dette:

Den vigtigste src attribut skal indeholde det statiske billede. Du kan enten opbygge et script til at generere det, eller du kan manuelt redigere og uploade et statisk skud for hver GIF.

Det data-gif attribut Indeholder den rigtige animerede GIF og de bytter på klik, hvis du mål på hovedbilledklassen (i dette tilfælde er det .myImg). Nu er alt hvad du behøver, en linje af jQuery for at få det hele til at fungere:

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

Absolut et af de fedeste jQuery-plugins jeg har set denne måned, og det er ret nemt at konfigurere.

Du kan lære mere ved at besøge GitHub side og der er også en live demo preview hostet på udviklerens hjemmeside.