Здравствуйте, уважаемые читатели XoZbloga! Это первая статья в новой рубрике «Плагины». В данной рубрике будут публиковаться короткие статьи, так сказать по существу, о плагинах на jQuery, либо иных. Начнем с экспериментального плагина на JQuery — Stapel, позволяющего автоматически группировать элементы (в рассмотренном примере, миниатюры изображений) по общему атрибуту с использованием эффектов.
Миниатюры такой галереи будут сгруппированы в соответствии с их общим атрибутом, но после нажатия на «стопку» (группу) они рассыпаются по одному. Галерея адаптивная, то есть, если не хватает горизонтального пространства для расположения элементов, то они будут выстраиваться вертикально.
HTML разметка
Для работы плагина понадобится библиотека jQuery, а также Modernizr.
Эскизы в рассматриваемой галерее — элементы списка. Для списка задается уникальный класс и id — допустим tp-grid.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <ul id="tp-grid" class="tp-grid"> <!-- Первая группа --> <li data-pile="Group 1"> <a href="#"> <span class="tp-info"> <span>Описание первого элемента</span> </span> <img src="images/1.jpg" /> </a> </li> <li data-pile="Group 1"> <a href="#"> <span class="tp-info"> <span>Описание второго элемента</span> </span> <img src="images/2.jpg" /> </a> </li> <!-- Вторая группа --> <li data-pile="Group 2"> <!-- ... --> </li> <li data-pile="Group 1,Group 2"> <!-- ... --> </li> <!-- ... --> </ul> |
Как вы наверное уже догадались, тем самым общим атрибутом по которому группируются элементы является data-pile. Элементы с одним и тем же значением этого атрибута будут сгруппированы. Группы также можно объединять.
В итоге сгруппированные элементы выглядят так:
Использование плагина
Вызывается плагин с указанием идентификатора списка ul:
1 | $( '#tp-grid' ).stapel(); |
Опции плагина
Для настройки используются несколько опций:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | $.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, // функции обратного вызова 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; } }; |
Вот и вся настройка.
После нажатия на группу элементов, формируется сетка из эскизов:
Источник статьи/урока: https://xozblog.ru