Новый jQuery плагин адаптивной галереи c автоматической группировкой

На сайте 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