Головна » UI / UX » Вбудуйте анімовані GIF-файли, такі як Facebook з jqGifPreview

    Вбудуйте анімовані 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 попередній перегляд демо-версії розміщено на веб-сайті розробника.