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.

Introduksjon til CSS Grid Layout Module

Det var en gang bord, deretter marginer og flyter, deretter flexbox og nå grid : CSS styrte alltid mot nye og bedre måter å lette den gamle jobben med koding av weboppsett . CSS Grid Layout-modellen kan opprette og oppdatere oppsettet langs to akser : horisontal og vertikal, som påvirker både bredde og høyde på elementene.Gridop

(Tekniske og design tips)

Slik tvinger du å avslutte programmer på Mac

Mac OS X er et flott operativsystem. Det er stabilt, men det er ikke perfekt. En gang imellom kan programmet du jobber med, fryse (eller henge). Hvis søknaden din ikke svarer eller du møter Spinning Beach Ball of Death, er sjansen din søknad krasjet.Hvis du ikke vil vente det, er det to måter hvordan du kan tvinge til å avslutte et program som ikke svarer.Tvin

(Tekniske og design tips)