Vložit animované GIFy jako Facebook s jqGifPreview

Twitter a Facebook mají spoustu lidí sdílení animovaných souborů GIF denně. Pokud jsou všechny tyto hry automaticky přehrávány, mohou být v krmivu hrůzné.

Obě sítě to obejít s funkce náhledu pro všechny GIFy. To umožňuje uživateli vybrat si které animace chtějí vidět výběrem, kdy se má animace spustit / zastavit.

S jqGifPreview plugin, můžete přinést stejnou funkci na vaše webové stránky.

Tento bezplatný plugin jQuery funguje na všech souborech GIF na stránce, nebo může cílit na libovolné, které chcete. Je to fantastický zdroj, ale jeho nastavení trvá trochu déle.

Pozastavený GIF je opravdu jen jeden snímek animace, na stránce.

Bohužel tento plugin ne automaticky vytáhněte statický obrázek z GIF pro tebe. Můžete to však provést pomocí jazyka PHP nebo jiného jazyka backendu, takže s trochou kódu to může být automatizováno.

Tento plugin používá atribut data- * uložit umístění obrázku GIF. Jakmile uživatel klikne na obrázek, automaticky se načte do src a zobrazí se na obrazovce.

Jednoduchý, efektivní a rozhodně elegantní efekt! Vše, co potřebujete, jsou soubory CSS / JS pro tento plugin, který můžete vytáhněte přímo z GitHubu. A samozřejmě potřebujete kopii jQuery, také.

Odtud nastavíte svůj obrázek takto:

Hlavní src atribut by měl obsahovat statický obraz. Můžete buď vytvořit skript pro jeho generování, nebo můžete ručně upravit a nahrát statický snímek pro každý GIF.

data-gif atribut drží skutečný animovaný GIF a pokud na vás kliknou, vymění se za kliknutí cílit na hlavní třídu obrazu (v tomto případě je to .myImg). Vše, co potřebujete, je jeden řádek jQuery.

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

Určitě jeden z nejlepších pluginů jQuery, které jsem viděl tento měsíc a je to docela snadné nastavení.

Více se můžete dozvědět na adrese Stránka GitHub a je tu také náhled živého náhledu hostuje na webových stránkách developera.