Gifffer: Управление Gif анимацией на JavaScript

Когда на странице много gif изображений, очень удобно, если они не мельтешат перед глазами, и пользователь может сам выбрать, что просмотреть, а что нет.

Чтобы внедрить ручное управление gif анимацией у себя на сайте, скачайте готовую JS библиотеку Gifffer. Gifffer позволяет отключить автоматический запуск браузером gif изображений. Кроме того, библиотека добавляет кнопку управления над анимацией: пользователь может вручную запустить, поставить на паузу, или возобновить просмотр. И еще есть один плюс. Кнопку запуска вы можете оформить так, как вам захочется с помощью CSS стилей.

Важно! Если вы используете gif анимацию на сайте под управлением WordPress, при загрузке движок создает уменьшенные копии исходного изображения. Проблема в том, что копии становятся статичными. Единственный способ обойти эту проблему – выводить исходное изображение. Это значит, что оптимизацию и выбор подходящего размера, необходимо производить перед заливкой картинки на сайт. Остается надеется, что в будущих версиях WP эта проблема будет устранена.

Установка библиотеки

Подключение библиотеки.

<script type="text/javascript" src="gifffer.js"></script>

В теге img необходимо указать путь к картинке, вместо src используется атрибут data-gifffer. Например:

<img data-gifffer="image.gif" />

Инициализация библиотеки:

window.onload = function() {
	Gifffer();
}

Можно оформить кнопку запуска анимации.

window.onload = function() {
	Gifffer({
		playButtonStyles: {
			'width': '60px',
			'height': '60px',
			'border-radius': '30px',
			'background': 'rgba(255, 255, 255, 0.3)',
			'position': 'absolute',
			'top': '50%',
			'left': '50%',
			'margin': '-30px 0 0 -30px'
		},
		playButtonIconStyles: {
			'width': '0',
			'height': '0',
			'border-top': '14px solid transparent',
			'border-bottom': '14px solid transparent',
			'border-left': '14px solid rgba(255, 255, 255, 0.75)',
			'position': 'absolute',
			'left': '26px',
			'top': '16px'
		}
	});
}

Дополнительно можно прописать атрибуты изображения:

<img 
     data-gifffer="image.gif" 
     data-gifffer-width="250" 
     data-gifffer-height="250"
     data-gifffer-alt="Описание картинки"
>

Интегрируем на WordPress сайт

Чтобы библиотека заработала на WordPress сайте, придется подкорректировать обычный вывод миниатюр с использованием функции the_post_thumbnail. Для работы анимации, нужно добавить изображению атрибут data-gifffer. Делается это так:

<?php $attr = array(
	'data-gifffer' => $src,
	'alt' => trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt )),
	);
	the_post_thumbnail( 'medium', $attr );
?>

Пример:

<!DOCTYPE html>
<html>
<head><meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<script type="text/javascript" src="gifffer.js"></script>
<script>window.onload = function() {Gifffer();}</script>
<title>Пример Gifffer</title>
</head>
<body>
<p>Когда забыл покормить кота</p>
<img  data-gifffer="image/1040.gif" data-gifffer-alt='Когда забыл покормить кота' /><br /><br />
<p>Котэ-массажист</p>
<img  data-gifffer="image/1059.gif" data-gifffer-alt='Котэ-массажист' />
</body>
</html>