Главная

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

2012-11-22 в 7:13, admin, рубрики: Adaptive Web Design, javascript, jquery, jquery plugins, адаптивная вёрстка, Веб-разработка, галерея изображений, метки: Adaptive Web Design, jquery plugins, адаптивная вёрстка, галерея изображений

Разрешите представить вам новый экспериментальный 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; }
 
};

Вместе с плагином идут свои стили, но их можно переопределять. Подробности в примерах.