Ugradi animirane GIF-ove poput Facebooka pomoću jqGifPreview

Twitter i Facebook imaju mnogo ljudi dijeljenje animiranih GIF-ova dnevno. Ako su sve to automatski reproducirane, u feedu mogu biti jezive.

Obje mreže to zaobilaze s a značajka "klikni za pregled" za sve GIF-ove. To omogućuje korisniku da odabere koje animacije žele vidjeti odabirom kada pokrenuti / zaustaviti animaciju.

Sa jqGifPreview dodatak, tu istu funkcionalnost možete unijeti na svoju web-lokaciju.

Ovaj besplatni jQuery dodatak radi na svim GIF-ovima na stranici ili se može usmjeriti na one koje želite. To je fantastičan resurs, ali potrebno je malo vremena za postavljanje.

Pauzirani GIF je zapravo samo jedan okvir animacije, prikazano na stranici.

Nažalost, ovaj dodatak ne automatski povlači statičku sliku iz GIF-a za tebe. Ali, to možete postići pomoću PHP-a ili bilo kojeg drugog pozadinskog jezika, tako da s malo koda, to može biti automatizirano.

Ovaj dodatak koristi atribut data * pohraniti lokaciju GIF slike. Kada korisnik klikne na sliku, automatski će se učitati u src atribut slike i prikazati se na zaslonu.

Jednostavan, učinkovit i definitivno uredan učinak! Sve što trebate je CSS / JS datoteke za ovaj dodatak koji možete izvući izravno iz tvrtke GitHub. I naravno, vi ćete trebate kopiju jQuery, isto.

Odatle postavljate sliku na sljedeći način:

Glavni src atribut sadrže statičnu sliku. Možete izraditi skriptu da biste je generirali ili možete ručno urediti i učitati statički snimak za svaki GIF.

gif podataka atribut drži pravi animirani GIF i oni će se prebaciti na klik ako vi ciljajte glavnu klasu slike (u ovom slučaju, to je .myImg). Sada, sve što vam treba je jedan redak jQuery-a da bi sve radilo:

 $ ( "MyImg".) JqGifPreview (). 

Definitivno, jedan od najboljih jQuery dodataka koje sam vidio ovog mjeseca i vrlo je jednostavno postaviti.

Više možete saznati ako posjetite Stranica GitHub a tu je i a pregledni prikaz uživo na web-lokaciji razvojnog programera.