Топ плагінів jQuery. Плагін jQuery сітка зображень

30

Від автора: вітаю вас, друзі. Дозвольте представити вам черговий плагін з розряду must have. Сьогодні ми познайомимося з цікавим плагіном jQuery сітка, який допоможе вам організувати сітку зображень як в Facebook, створивши компактну jQuery галерею фотографій, як в Facebook.

Отже, у вас є багато фотографій, наприклад, висвітлюють певна подія. Ви хочете поділитися ними з іншими, але от біда — місця на сторінці замало. Як би зробити так, щоб показати частину фотографій, приховавши при цьому решта на попередньому перегляді, але зробивши їх доступними в модальному вікні? Вихід є — нам допоможе плагін Images Grid, який зробить галерею фотографій у вигляді сітки, приблизно так, як це робиться в соціальних мережах. Давайте спробуємо організувати jQuery сітку для галереї Facebook.

Зайдіть на офіційну сторінку плагіна jQuery сітки і його скачайте архів або просто візьміть потрібні файли з исходников. Підключимо їх:

Далі нам потрібно контейнер, в який плагін майбутньої jquery галереї Facebook помістить потрібні нам зображення:

Власне, це практично все, що нам потрібно, ніякої додаткової верстки — всю наступну роботу за нас зробить плагін jQuery сітки. Залишається лише ініціалізувати його, звернувшись до методу imagesGrid(). В якості параметрів метод приймає масив картинок, які ми хочемо показати:

$(function(){
$(‘#gallery’).imagesGrid({
images: [
‘https://unsplash.it/1300/800?image=1’,
‘https://unsplash.it/1300/800?image=2’,
‘https://unsplash.it/1300/800?image=3’,
‘https://unsplash.it/1300/800?image=4’,
‘https://unsplash.it/1300/800?image=5’,
‘https://unsplash.it/1300/800?image=6’,
‘https://unsplash.it/1300/800?image=7’,
‘https://unsplash.it/1300/800?image=8’,
‘https://unsplash.it/1300/800?image=9’,
‘https://unsplash.it/1300/800?image=10’
]
});
});

Готово! Ось що ми побачимо на сторінці — практично галерея Facebook:

Топ плагинов jQuery. Плагин jQuery сетка изображений

Ну а якшо по будь-якій з фотографій, ми відкриємо повноекранний режим перегляду, де зможемо переглянути всі зображення:

Топ плагинов jQuery. Плагин jQuery сетка изображений

Виглядає прекрасно, як на мене. Плагін jQuery сітки відпрацював на відмінно. Ну а на цьому сьогодні все. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і JavaScript ви можете дізнатися з наших уроків або курсу. Удачі!