Вградете анимирани GIF файлове като Facebook с jqGifPreview

Twitter и Facebook имат много хора споделяне на анимирани GIF файлове дневно. Ако всички те се възпроизвеждат автоматично, те могат да бъдат ужасни в даден канал.

И двете мрежи заобикалят това с a функция за преглед при кликване за всички GIF. Това позволява на потребителя да избере кои анимации искат да видят като изберете кога да започнете / спрете анимацията.

С плъгин jqGifPreview, можете да въведете същата функционалност в уебсайта си.

Това безплатно jQuery плъгин работи на всички GIF файлове на страницата или може да се насочи специално към желаното от вас. Това е фантастичен ресурс, но отнема малко време, за да се създаде.

Паузиран GIF е наистина прав един кадър от анимацията, на страницата.

За съжаление този плъгин не автоматично изтегля статична снимка от GIF за теб. Но можете да постигнете това с помощта на PHP или друг език на бекенда, така че с малко код това може да бъде автоматизирано.

Този плъгин използва атрибут data * съхранявайте местоположението на GIF изображението. Щом потребителят кликне върху изображението, той автоматично ще се зареди в SRC атрибут на изображението и да се показва на екрана.

Прост, ефективен и определено спретнат ефект! Всичко, от което се нуждаете, са CSS / JS файловете за този плъгин, които можете издърпайте директно от GitHub. И разбира се трябва копие на jQuery, също.

От там създавате изображението си по следния начин:

Основното SRC атрибут съдържа статичната картина. Можете да създадете скрипт, за да го генерирате, или можете ръчно да редактирате и качите статичен изстрел за всеки GIF.

Най- данни GIF атрибут притежава истинския анимиран GIF и те ще разменят при клик насочете към основния клас на изображение (в този случай това е .myImg). Сега, всичко, от което се нуждаете, е един ред jQuery, за да работи всичко:

 $ ( "MyImg.") JqGifPreview (.); 

Определено, един от най-готините jQuery плъгини, които съм виждал този месец и е доста лесно да се настрои.

Можете да научите повече, като посетите Страница GitHub и има също a визуализация на демонстрация на живо хоствано на уебсайта на разработчика.