Красива галерея з сортуванням на jquery.

Всім привіт! У цій статті ми розглянемо, як зробити красиву і зручно сортируемое галерею на JQuery.

Красива, зручно сортируемое галерея - це прекрасна річ для вашого сайту, яка буде радувати вас і ваших відвідувачів. Сьогодні ми розглянемо дуже простий в установці і настройці плагін для бібліотеки JQuery - Filterizr.

Відео: jQuery # 8: галерея зображень (без плагінів)

Незважаючи на простоту використання, плагін досить легкий і ефектний. Давайте розглянемо його докладніше.

демонстрація

Щоб подивитися, як працює плагін, зайдіть на офіційний сайт, і ось він уже перед вами!

Відео: Masonry.js галерея для сайту Частина 1

Ви можете вибрати сортування по містах, природі, промисловості, світанку, заходу або показати всі фотографії (значення за замовчуванням). присутній кнопка Shuffle, яка дозволить вам перемішати зображення. кнопки ASC і DESC сортують картинки по зростанню і зменшенням відповідно. Якщо ви хочете знайти якесь зображення по позиції або опису, виберіть потрібний пункт у випадаючому списку і введіть запит в поле пошуку. При наведенні на зображення мишки картинка перетворюється з чорно-білої в кольорову.

установка

Щоб завантажити бібліотеку, натисніть кнопку Download або використовуйте NPM:

npm install filterizr

Плагін вже налаштований з коробки, але, якщо ви хочете переписати значення за замовчуванням, ви можете або:

1) Передати об`єкт з параметрами в конструктор JQuery

var filterizd = $(`.filtr-container`).filterizr({ 
// параметри 
})

2) Переписати параметри, використовуючи setOptions () метод в об`єкті Filterizr.

Відео: JQuery галерея своїми руками

filterizd.filterizr(`SetOptions`,{ 
// параметри 
})

параметри

Параметри за замовчуванням:

Відео: Проста галерея на чистому js

options ={ 
 animationDuration:0.5, 
 callbacks:{ 
 onFilteringStart:function(){}, 
 onFilteringEnd:function(){} 
}, 
 delay:0, 
 delayMode:`Progressive`, 
 easing:`Ease-out`, 
 filter:`All`, 
 filterOutCss:{ 
 opacity:0, 
 transform:`Scale (0.5)` 
}, 
 filterInCss:{ 
 opacity:0, 
 transform:`Scale (1)` 
}, 
 layout:`SameSize`, 
 selector:`.filtr-container`, 
 setupControls:true 
}

Більш докладні інструкції і опис кожного параметра ви можете знайти на офіційному сайті плагіна.

Якщо ви не дуже добре знаєте JQuery і не впевнені, як використовувати для нього плагіни, а, може бути, ви самі хочете писати плагіни для бібліотеки, раджу придивитися до курсу jаvascript, jQuery і Ajax з Нулі до Гуру, який дасть вам ці та багато інших знань.

А у мене на цьому все. Дякую за увагу!

Поділися в соціальних мережах:

Схожі