Від автора: вітаю вас! Дозвольте представити вам черговий плагін з розряду must have. Сьогодні ми познайомимося з чудовим jQuery плагіном, який дозволить вам організувати цікаву jQuery галерею, схожу на галерею зображень Google. До того ж цей плагін пропонує нам jQuery сітку. Отже, jQuery галерея і jQuery сітка, почнемо.
Отже, сьогодні ми працюємо з плагіном під назвою MG Space. Це дійсно оригінальний і потрясний плагін, який дозволить вам організувати jQuery галерею зображень приблизно в тому ж стилі, що і картинки Google. Тобто, у нас є деяка базова картинка, при кліці по якій під нею відкривається панель з додатковими картинками. Виглядає дуже цікаво.
Як зазвичай, перейдемо на сторінку плагіна і завантажити його архів, після чого підключимо необхідні файли плагін jQuery галерея.
Тепер найскладніше — розмітка. Хоча насправді нічого складного тут, звичайно ж, немає — просто головне не заплутатися, щоб вийшла jQuery сітка. Отже, першим ділом нам знадобиться загальний контейнер, яким ми дамо клас mg-space-init:
Далі нам потрібно помістити всередину контейнера базові картинки в блок з класом mg-rows:
Залишилася справа за малим — після блоку базових картинок розмістити блок з класом mg-targets всередину якого, у свою чергу, містяться блоки з потрібними даними. Кількість таких блоків повинна відповідати кількості базових зображень. Приклад повної підсумкової верстки ви можете подивитися в исходниках до статті:
Ну і само собою — виклик методу плагін jQuery галереї — mgSpace:
$(function(){
$(‘.mg-space-init’).mgSpace();
});
Клік по базовій картинці тепер повинен відкривати відповідну панель з вкладеними зображеннями.
Краса, чи не так? jQuery сітка і jQuery галерея в одному флаконі. Ну а у мене на цьому все. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і JavaScript ви можете дізнатися з наших уроків або курсу. Удачі!