Встраивать анимированные GIF-файлы, такие как Facebook, с jqGifPreview
У Twitter и Facebook много людей делиться анимированными гифками ежедневно. Если все они воспроизводятся автоматически, они могут быть ужасными в канале.
Обе сети обойти это с функция предварительного просмотра для всех картинок Это позволяет пользователю выбирать какую анимацию они хотят увидеть выбрав, когда запустить / остановить анимацию.
С плагин jqGifPreview, Вы можете принести эту же функциональность на свой сайт.
это бесплатный плагин jQuery работает на всех GIF-файлах на странице, или может нацеливаться на любой, который вы хотите. Это фантастический ресурс, но он требует немного времени для настройки.
Приостановленный GIF действительно просто один кадр анимации, отображается на странице.
К сожалению, этот плагин не автоматически вытащить статическую картинку из GIF для тебя. Но вы можете сделать это с помощью PHP или любого другого языка бэкэнда, так что с небольшим количеством кода это может быть автоматизировано.
Этот плагин использует атрибут data- * для сохранить расположение изображения GIF. Как только пользователь щелкнет изображение, оно автоматически загрузится в ЦСИ атрибут изображения и будет отображаться на экране.
Простой, эффективный и, безусловно, аккуратный эффект! Все, что вам нужно, это файлы CSS / JS для этого плагина, которые вы можете вытащить прямо из GitHub. И, конечно же, вы будете нужна копия JQuery, тоже.
Оттуда вы настраиваете свое изображение так:
Главный ЦСИ атрибут должен содержать статическую картину. Вы можете либо создать скрипт для его генерации, либо вы можете вручную редактировать и загружать статический снимок для каждого GIF.
данных GIF атрибут держит настоящий анимированный GIF и они будут менять на клик, если вы нацелить на основной класс изображения (в этом случае это .myImg). Теперь все, что вам нужно, это одна строка jQuery, чтобы все это заработало:
$ ( "MyImg.") JqGifPreview ().
Определенно, один из самых крутых плагинов jQuery, которые я видел в этом месяце, и его довольно легко настроить.
Вы можете узнать больше, посетив Страница GitHub и есть также предварительный просмотр демо размещено на сайте разработчика.
