Вбудуйте анімовані GIF-файли, такі як Facebook з jqGifPreview
Twitter і Facebook мають багато людей спільного використання анімованих GIF-файлів щодня. Якщо всі вони автоматично відтворюються, вони можуть бути жахливими в каналі.
Обидві мережі обходяться цим з a функція перегляду кліків для всіх GIF. Це дозволяє користувачеві вибрати які анімації вони хочуть бачити вибираючи, коли починати / зупиняти анімацію.
З Додаток jqGifPreview, Ви можете привести цю функціональність до свого веб-сайту.
Це безкоштовний плагін jQuery працює на всіх GIF-файлах на сторінці або може спеціально націлювати будь-які потрібні. Це фантастичний ресурс, але на це потрібно трохи часу.
Призупинений GIF дійсно є справедливим один кадр анімації, відображається на сторінці.
На жаль, цей плагін не автоматично витягує статичну картинку з GIF для вас. Але ви можете виконати це за допомогою PHP або будь-якої іншої мови, так що з деяким кодом це може бути автоматизовано.
Цей плагін використовує атрибут data * зберігати розташування зображення GIF. Після того, як користувач натисне на зображення, він автоматично завантажиться до зображення src атрибут зображення і відображається на екрані.
Простий, ефективний і, безумовно, акуратний ефект! Все, що вам потрібно, це CSS / JS файли для цього плагіна, які ви можете тягніть безпосередньо з GitHub. І, звичайно, ви потрібна копія jQuery, теж.
Звідти ви налаштували зображення таким чином:
Головний src атрибут повинен містять статичне зображення. Ви можете створити сценарій, щоб створити його, або ви можете вручну редагувати та завантажувати статичний кадр для кожного GIF.
The data-gif атрибут містить реальний анімований GIF і вони будуть помінятися на клік, якщо ви націлювання на основний клас зображення (в даному випадку це .myImg). Тепер все, що вам потрібно, - це один рядок jQuery, щоб все працювало:
$ (". myImg"). jqGifPreview (); Безумовно, це один з найкрутіших плагінів jQuery, який я бачив у цьому місяці, і його досить легко налаштувати.
Ви можете дізнатися більше, відвідавши Сторінка GitHub і є також a попередній перегляд демо-версії розміщено на веб-сайті розробника.
