Animált GIF-ek beágyazása Mint a Facebook a jqGifPreview segítségével
A Twitternek és a Facebooknak sok ember van animált GIF-ek megosztása napi. Ha ezek mindegyike automatikusan lejátszásra kerül, akkor a hírcsatornákban rettenetesek lehetnek.
Mindkét hálózat körül egy ilyen kattintás-előnézet funkció minden GIF-re. Ezzel a felhasználó választhat mely animációkat szeretné látni az animáció elindításához / leállításához.
A ... val jqGifPreview bővítmény, ugyanezt a funkciót a webhelyére hozhatja.
Ez ingyenes jQuery plugin az oldalon található összes GIF-en működik, vagy kifejezetten célozhatja a kívánt adatokat. Ez egy fantasztikus erőforrás, de egy kis időt vesz igénybe a beállításhoz.
A szüneteltetett GIF valóban igaz egy animációs keret, megjelenik az oldalon.
Sajnos ez a bővítmény nem automatikusan húz egy statikus képet a GIF-ből neked. Ezt azonban PHP vagy bármely más backend nyelv használatával végezheti el, így egy kis kóddal ez automatizálható.
Ez a bővítmény adat * attribútumot használ tárolja a GIF kép helyét. Miután a felhasználó rákattint a képre, automatikusan betöltődik a src a kép attribútuma, és megjelenik a képernyőn.
Egyszerű, hatékony és biztosan szép hatás! Mindössze a CSS / JS fájlokat kell ehhez a bővítményhez adnia húzza közvetlenül a GitHub-ból. És persze szükség van egy jQuery másolatára, is.
Innentől függően beállíthatja a képet:
A fő src attribútumnak tartalmazzák a statikus képet. Létrehozhat egy szkriptet, hogy létrehozza azt, vagy manuálisan szerkesztheti és feltöltheti statikus felvételét minden GIF-re.
A data-gif tulajdonság a valódi animált GIF-et tartja és ha rákattintanak, akkor kattintsanak rá célozza meg a fő képosztályt (ebben az esetben ez az .myImg). Most már csak egy sor jQuery-re van szükséged ahhoz, hogy az összes működjön:
$ ( "MyImg"). JqGifPreview ();
Határozottan, az egyik legmenőbb jQuery plugin, amit ebben a hónapban láttam, és ez nagyon könnyen beállítható.
Tudjon meg többet, ha meglátogatja a GitHub oldal és van egy is élő demo előnézet a fejlesztő webhelyén.
