Legg inn animerte GIFs som Facebook med jqGifPreview

Twitter og Facebook har mange mennesker som deler animerte GIF hver dag. Hvis disse er alle auto-spilte, kan de være grusomme i en feed.

Begge nettverkene kommer rundt dette med en klikk-for-forhåndsvisning for alle GIF-er. Dette lar brukeren velge hvilke animasjoner de vil se ved å velge når du skal starte / stoppe animasjonen.

Med pluggen for jqGifPreview kan du ta med samme funksjonalitet til nettstedet ditt.

Dette gratis jQuery-pluginet 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, som vises på siden.

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

Dette pluginet bruker et data- * attributt for å lagre GIF-bildeposisjonen . Når brukeren klikker på bildet, lastes det automatisk inn i src attributtet til bildet og vises på skjermen.

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

Deretter setter du opp bildet ditt slik:

Hovedattributtet for src skal inneholde 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.

data-gif attributtet inneholder den virkelige animerte GIF-en, og de bytter på klikk hvis du målretter mot 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-siden, og det er også en live demo forhåndsvisning som er hostet på utviklerens nettsted.

12 plugger for å øke hastigheten på WordPress-nettstedet ditt

Alle elsker et raskt lastingsnettsted (som inkluderer deg og dine lesere også), så selvfølgelig vet du allerede at nettsider laster hastigheter påvirker brukeropplevelsen.I dette innlegget kommer vi ikke til å overbevise deg for hvorfor du trenger et raskere WordPress-nettsted, eller dele med deg hvordan du redigerer PHP, javascript og databaser, all den tekniske kunnskapen for å optimalisere nettstedet ditt ytterligere.Hvorf

(Tekniske og design tips)

10 Apps for å forbedre Instagram-opplevelsen på Android

Instagram har eksistert en stund nå, og har blitt en av verdens mest populære bildeutvekslingsprogram på alle plattformer den har blitt utgitt til. Men akkurat som mange apps, har det sine quirks og små irritasjoner som gjør at du skulle ønske det var et bedre alternativ der ute et sted.I dette innlegget skal vi hjelpe deg med å få mest mulig ut av Instagram med bruk av Android-apper som kan hjelpe til med å lappe hullene i Instagram-økosystemet. Fra å ta

(Tekniske og design tips)