Vložiť animované GIF ako Facebook s jqGifPreview

Twitter a Facebook majú veľa ľudí zdieľanie animovaných GIF denne. Ak sú všetky automaticky prehrané, môžu byť v krmivách strašné.

Obe siete sa o to pokúšajú funkcia kliknutia na ukážku pre všetky GIF. Toto umožňuje užívateľovi vybrať si ktoré animácie chcú vidieť výberom momentu spustenia / zastavenia animácie.

S doplnok jqGifPreview, môžete priniesť na svoju webovú stránku rovnakú funkčnosť.

toto free jQuery plugin pracuje na všetkých GIF na stránke alebo môže konkrétne zacieliť na všetky, ktoré chcete. Je to fantastický zdroj, ale chvíľu trvá, kým ho zriadite.

Pozastavený GIF je naozaj spravodlivý jeden snímok animácie, zobrazené na stránke.

Tento doplnok bohužiaľ nie automaticky vytiahne statický obrázok z GIF pre teba. Môžete to však dosiahnuť pomocou PHP alebo akéhokoľvek iného podporného jazyka, takže s trochou kódu, môžete to automatizovať.

Tento doplnok používa atribút data- * ukladať miesto s obrázkami GIF. Keď používateľ klikne na obrázok, automaticky sa načíta src atribút obrázka a zobrazenie na obrazovke.

Jednoduchý, efektívny a určite čistý efekt! Všetko, čo potrebujete, sú súbory CSS / JS pre tento plugin, ktoré môžete vytiahnite priamo z GitHub. A samozrejme potrebujete kópiu jQuery, tiež.

Odtiaľ nastavíte obrázok takto:

Hlavný src atribút by mal obsahovať statický obrázok. Môžete buď vytvoriť skript na vygenerovanie, alebo môžete ručne upraviť a nahrať statický záber pre každý GIF.

Data-gif atribút drží skutočný animovaný GIF a oni vymenia za kliknutie, ak vy zamerajte hlavnú triedu obrázkov (v tomto prípade je to .myImg). Teraz všetko, čo potrebujete, je jedna riadka jQuery, aby ste všetko pracovali:

 $ ( "MyImg.") JqGifPreview (). 

Jeden z najkrajších jQuery pluginov, ktorý som videl tento mesiac, je veľmi jednoduché a je to veľmi jednoduché nastaviť.

Ďalšie informácie nájdete na stránke Stránka GitHub a je tu tiež a live demo preview hosťované na webových stránkach vývojára.