Топ плагінів jQuery. Плагін jQuery галерея Google

21

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

Отже, сьогодні ми працюємо з плагіном під назвою MG Space. Це дійсно оригінальний і потрясний плагін, який дозволить вам організувати jQuery галерею зображень приблизно в тому ж стилі, що і картинки Google. Тобто, у нас є деяка базова картинка, при кліці по якій під нею відкривається панель з додатковими картинками. Виглядає дуже цікаво.

Як зазвичай, перейдемо на сторінку плагіна і завантажити його архів, після чого підключимо необхідні файли плагін jQuery галерея.

Тепер найскладніше — розмітка. Хоча насправді нічого складного тут, звичайно ж, немає — просто головне не заплутатися, щоб вийшла jQuery сітка. Отже, першим ділом нам знадобиться загальний контейнер, яким ми дамо клас mg-space-init:

Далі нам потрібно помістити всередину контейнера базові картинки в блок з класом mg-rows:

Топ плагінів jQuery. Плагін jQuery галерея Google
Топ плагінів jQuery. Плагін jQuery галерея Google
Топ плагінів jQuery. Плагін jQuery галерея Google

Топ плагінів jQuery. Плагін jQuery галерея Google

Залишилася справа за малим — після блоку базових картинок розмістити блок з класом mg-targets всередину якого, у свою чергу, містяться блоки з потрібними даними. Кількість таких блоків повинна відповідати кількості базових зображень. Приклад повної підсумкової верстки ви можете подивитися в исходниках до статті:

Топ плагінів jQuery. Плагін jQuery галерея Google
Топ плагінів jQuery. Плагін jQuery галерея Google
Топ плагінів jQuery. Плагін jQuery галерея Google
Топ плагінів jQuery. Плагін jQuery галерея Google
Топ плагінів jQuery. Плагін jQuery галерея Google
Топ плагінів jQuery. Плагін jQuery галерея Google
Топ плагінів jQuery. Плагін jQuery галерея Google

Ну і само собою — виклик методу плагін jQuery галереї — mgSpace:

$(function(){
$(‘.mg-space-init’).mgSpace();
});

Клік по базовій картинці тепер повинен відкривати відповідну панель з вкладеними зображеннями.

Топ плагінів jQuery. Плагін jQuery галерея Google

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