На сайте tympanus.net представлен новый экспериментальный 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; }
};
Вместе с плагином идут свои стили, но их можно переопределять. Подробности в примерах.
Эффект стопки создается жестко закодированным количеством изображений (два повернуты на определенный угол, одно в основании). Если есть желание изменить это, то соответствующий код в плагине выглядит так:
for( var i = 0, len = p.elements.length; i < len; ++i ) {
var $el = $( p.elements[i].el ),
styleCSS = { transform : 'rotate(0deg)' };
this._applyInitialTransition( $el );
if( i === len - 2 ) {
styleCSS = { transform : 'rotate(' + this.options.pileAngles + 'deg)' };
}
else if( i === len - 3 ) {
styleCSS = { transform : 'rotate(-' + this.options.pileAngles + 'deg)' };
}
else if( i !== len - 1 ) {
var extraStyle = { visibility : 'hidden' };
$el.css( extraStyle ).data( 'extraStyle', extraStyle );
}
...
В нем к последним двум элементам применяется поворот на количество градусов, определенных в настройках, а остальные просто скрываются. Очень легко поменять этот код, чтобы задать нужное количество «брошенных» изображений.
Применение в Drupal
Пользователь mrded разрабатывает модуль для Drupal с интеграцией плагина и модуля Views.
Ссылки
Проект на GitHub.
Примеры работы.
Статья подготовлена по материалам tympanus.net
