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.

Utforsk Open Source Laravel Prosjekter med Open Laravel

Webutviklere elsker rammebetingelser fordi de sparer tid og forbedrer kodekvaliteten. Det er mange PHP-rammer der ute, men Laravel er langt det beste.Hvis du bare kommer inn i Laravel, kan du lære mye ved å studere andres kode . Det er der Open Laravel kommer til nytte.Nettstedet fungerer som et desentralisert lager som kuraterer de beste open source Laravel-prosjektene fra hele verden.

(Tekniske og design tips)

Multi.js - En brukervennlig velg boks bygget på vanlig JavaScript

Velg menyer er primitive, men de fungerer. Det samme gjelder alle de typiske forminngangene som for eksempel boksene og radioknappene .Det er enkelt å lage dine egne skjemaer, men gjenoppbygging av grensesnittelementer fra grunnen kan være tøft. Derfor er Multi.js et så verdifullt plugin for å erstatte standard utvalgsbokser .Med

(Tekniske og design tips)