Iegult animētus GIF kā Facebook ar jqGifPreview

Twitter un Facebook ir daudz cilvēku animētu GIF koplietošana katru dienu. Ja tie visi ir automātiski atskaņoti, tie var būt barojoši.

Abi tīkli to apiet ar a Noklikšķiniet uz priekšskatījuma funkciju visām GIF. Tas ļauj lietotājam izvēlēties kuras animācijas viņi vēlas redzēt izvēloties, kad sākt / pārtraukt animāciju.

Ar jqGifPreview spraudnis, jūs varat šo pašu funkcionalitāti pievienot savai vietnei.

Tas bezmaksas jQuery spraudnis darbojas uz visām GIF lapām, vai arī var mērķēt uz jebkuru no tām, ko vēlaties. Tas ir fantastisks resurss, bet, lai izveidotu, tas aizņem maz laika.

Pārtrauktā GIF ir tiešām taisnība viens animācijas kadrs, parādās lapā.

Diemžēl šis spraudnis nav automātiski izvelk statisku attēlu no GIF tev. Bet, jūs varat to paveikt, izmantojot PHP vai jebkuru citu backend valodu, tāpēc ar mazliet kodu tas var tikt automatizēts.

Šis spraudnis izmanto datu * atribūtu saglabāt GIF attēla atrašanās vietu. Kad lietotājs noklikšķinās uz attēla, tas automātiski tiks ielādēts src attēla atribūts un parādās ekrānā.

Vienkāršs, efektīvs un noteikti tīrs efekts! Viss, kas Jums nepieciešams, ir spraudņa CSS / JS faili, kurus varat velciet tieši no GitHub. Un, protams, jūs nepieciešama jQuery kopija, arī.

No turienes jūs iestatāt savu attēlu šādi:

Galvenais src atribūtam satur statisko attēlu. Jūs varat izveidot skriptu, lai to ģenerētu, vai arī varat manuāli rediģēt un augšupielādēt statisku šāvienu katram GIF.

The datu-gif atribūts tur reālu animētu GIF un viņi mainīs klikšķi, ja jūs mērķa galveno attēlu klasi (šajā gadījumā tas ir .myImg). Tagad viss, kas jums nepieciešams, ir viena jQuery līnija, lai to visu varētu izmantot:

 $ (". myImg") jqGifPreview (); 

Noteikti, viens no stilīgākajiem jQuery spraudņiem, ko esmu redzējis šajā mēnesī, un tas ir diezgan viegli uzstādāms.

Jūs varat uzzināt vairāk, apmeklējot GitHub lapa un tur ir arī tiešraides demonstrācija izvietots izstrādātāja tīmekļa vietnē.