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

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

image

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

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

Ссылки

Проект на GitHub.
Примеры работы.

Статья подготовлена по материалам tympanus.net

Автор: druf

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js