- PVSM.RU - https://www.pvsm.ru -
Разрешите представить вам новый экспериментальный jQuery плагин для создания галереи, который можно использовать для решения разных задач, например, простой показ изображении, сгруппированных определенным образом или отображение целых альбомов пользователей с фотографиями без перезагрузки страницы. Разумеется, галерея адаптивная, что позволяет удобно использовать ее как на компьютерах с большим экраном так и на мобильных устройствах.
Плагин автоматически, используя атрибут data-*, группирует миниатюры изображений в некоторое подобие пачки (стопки). Когда пользователь кликает на нее — изображения разлетаются в разные стороны в определенные положения. Они могут быть немного повернуты или смещены
Сетка, используемая для вывода, адаптивная. При уменьшении разрешения экрана элементы таблицы перестраиваются и количество столбцов уменьшается.
Поддержка браузеров неплохая, только стоит учесть, что CSS преобразования работают только в браузерах, которые их поддерживают. Для остальных есть небольшая анимация.
Создаем ненумерованный список с классом tp-grid:
<ul id="tp-grid" class="tp-grid">
<li data-pile="Group 1">
<a href="#">
<span class="tp-info">
<span>Some title</span>
</span>
<img src="images/1.jpg" />
</a>
</li>
<li data-pile="Group 2">
<!-- ... -->
</li>
<li data-pile="Group 1,Group 2">
<!-- ... -->
</li>
<!-- ... -->
</ul>
Важный атрибут data-pile содержит имя группы, к которй принадлежит изображение. Причем, каждая из миниатюр может принадлежать более, чем к одной группе.
После этого вызываем плагин:
$( '#tp-grid' ).stapel();
$.Stapel.defaults = {
// Расстояние между элементами
gutter : 40,
// Угол поворота для второго и третьего элемента
// (для большей реалистичности)
pileAngles : 2,
// Настройки анимации для стопки, по которой кликнули
pileAnimation : {
openSpeed : 400,
openEasing : 'ease-in-out',
closeSpeed : 400,
closeEasing : 'ease-in-out'
},
// Настройки анимации для остальных элементов
otherPileAnimation : {
openSpeed : 400,
openEasing : 'ease-in-out',
closeSpeed : 350,
closeEasing : 'ease-in-out'
},
// Задержка для каждого элемента в стопке
delay : 0,
// Делать ли рандомный поворот для элементов
randomAngle : false,
// callback-функции
onLoad : function() { return false; },
onBeforeOpen : function( pileName ) { return false; },
onAfterOpen : function( pileName, totalItems ) { return false; },
onBeforeClose : function( pileName ) { return false; },
onAfterClose : function( pileName, totalItems ) { return false; }
};
Вместе с плагином идут свои стили, но их можно переопределять. Подробности в примерах [1].
Проект на GitHub [2].
Примеры работы [1].
Статья подготовлена по материалам tympanus.net [3]
Автор: druf
Источник [4]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/20745
Ссылки в тексте:
[1] примерах: http://tympanus.net/Development/Stapel/
[2] Проект на GitHub: https://github.com/codrops/Stapel
[3] tympanus.net: http://tympanus.net/codrops/2012/11/21/adaptive-thumbnail-pile-effect-with-automatic-grouping/
[4] Источник: http://habrahabr.ru/post/159733/
Нажмите здесь для печати.