Osadź animowane GIF-y, takie jak Facebook, za pomocą jqGifPreview

Twitter i Facebook mają wielu ludzi udostępnianie animowanych GIFów codziennie. Jeśli wszystkie są odtwarzane automatycznie, w kanale mogą być makabryczne.

Obie sieci poradzą sobie z tym funkcja „kliknij, aby wyświetlić podgląd” dla wszystkich GIFów. Pozwala to użytkownikowi wybrać jakie animacje chcą zobaczyć wybierając, kiedy rozpocząć / zatrzymać animację.

Z wtyczka jqGifPreview, możesz wprowadzić tę samą funkcjonalność do swojej witryny.

To darmowa wtyczka jQuery działa na wszystkich plikach GIF na stronie lub może celować w dowolne, które chcesz. To fantastyczny zasób, ale jego przygotowanie zajmuje trochę czasu.

Wstrzymany GIF jest naprawdę sprawiedliwy jedna klatka animacji, wyświetlane na stronie.

Niestety ta wtyczka nie automatycznie wyciągnij statyczne zdjęcie z GIF dla Was. Ale możesz to zrobić za pomocą PHP lub dowolnego innego języka zaplecza, więc przy odrobinie kodu można to zautomatyzować.

Ta wtyczka używa atrybutu data- * do zapisz lokalizację obrazu GIF. Gdy użytkownik kliknie obraz, automatycznie załaduje się do src atrybut obrazu i być wyświetlany na ekranie.

Prosty, skuteczny i zdecydowanie zgrabny efekt! Wszystko, czego potrzebujesz, to pliki CSS / JS dla tej wtyczki, którą możesz pociągnij bezpośrednio z GitHub. I oczywiście ty potrzebuję kopii jQuery, zbyt.

Od tego momentu konfigurujesz swój obraz w następujący sposób:

Główny src atrybut powinien zawierają statyczny obraz. Możesz albo zbudować skrypt, aby go wygenerować, albo ręcznie edytować i przesłać statyczny strzał dla każdego GIF.

The dane-gif atrybut zawiera prawdziwy animowany GIF a oni się zmienią, jeśli klikniesz celuj w główną klasę obrazu (w tym przypadku jest to .myImg). Teraz wszystko, czego potrzebujesz, to jedna linia jQuery, aby wszystko działało:

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

Zdecydowanie, jedna z najfajniejszych wtyczek jQuery, które widziałem w tym miesiącu i jest całkiem łatwa w konfiguracji.

Możesz dowiedzieć się więcej, odwiedzając stronę Strona GitHub i jest też podgląd demonstracji na żywo hostowane na stronie dewelopera.