Vdelaj animirane GIF-je, kot je Facebook, z jqGifPreview

Twitter in Facebook imajo veliko ljudi deljenje animiranih GIF-ov dnevno. Če so vse to samodejno predvajane, so lahko v viru grozljive.

Obe omrežji se ukvarjata s tem funkcija klikni za predogled za vse GIF. Tako lahko uporabnik izbere katere animacije želijo videti z izbiro, kdaj začeti / ustaviti animacijo.

Z Vtičnik jqGifPreview, enako funkcionalnost lahko prenesete na svoje spletno mesto.

To free jQuery plugin deluje na vseh GIF-jih na strani ali pa se lahko posebej usmeri na katero koli želeno datoteko. To je fantastičen vir, vendar je potrebno nekaj časa za vzpostavitev.

Začasno zaustavljen GIF je resnično enak en okvir animacije, na strani.

Na žalost ta vtičnik ne samodejno povleče statično sliko iz GIF zate. Vendar pa lahko to dosežete z uporabo PHP-ja ali katerega koli drugega ozadnega jezika, tako da se lahko z malo kode to avtomatizira.

Ta vtičnik uporablja atribut data-* shranite lokacijo slike GIF. Ko uporabnik klikne sliko, se samodejno naloži v sliko src atribut slike in se prikaže na zaslonu.

Enostaven, učinkovit in zagotovo čisti učinek! Vse kar potrebujete je CSS / JS datoteke za ta plugin, ki jih lahko potegnite neposredno iz GitHub. In seveda boste potrebujete kopijo jQuery, tudi.

Od tam nastavite sliko tako:

Glavni src atribut vsebujejo statično sliko. Lahko ga izdelate ali pa ga ročno uredite in naložite statični posnetek za vsak GIF.

The data-gif atribut ima pravi animirani GIF in ti bodo zamenjali klik ciljati na glavni slikovni razred (v tem primeru je .myImg). Zdaj, vse kar potrebujete, je ena vrstica jQuery, da bo vse delovalo:

 $ (". myImg"). jqGifPreview (); 

Zagotovo je eden izmed najbolj kul jQuery vtičnikov, ki sem jih videl ta mesec in je zelo enostavno nastaviti.

Več lahko izveste z obiskom Stran GitHub in tam je tudi a predogled v živo gostuje na spletni strani razvijalca.