Топ плагінів jQuery. Плагін Magnific Popup

41

Від автора: вітаю вас, друзі. Ми продовжуємо знайомитися з чудовими плагінами jQuery, що дозволяють вирішити велике коло різних завдань. У цій статті ми познайомимося з простим плагіном модальних вікон, який на всі 100 вирішує поставлені перед ним завдання — показ контенту в модальному вікні з ефектом анімації.

Плагінів, аналогічних плагіну Magnific Popup — десятки і сотні. У когось є свої «улюбленці», які використовуються у кожному проекті, хтось постійно експериментує і для кожного нового проекту шукає нові плагін для показу картинок в модальному вікні. Сьогодні ми також поекспериментуємо і розглянемо плагін Magnific Popup, про яку я дізнався нещодавно.

Топ плагинов jQuery. Плагин Magnific Popup

До переваг плагіна можна віднести його адаптивність, а також відносно невелика вага. Скачайте архів з плагіном з сайту GitHub і підключіть необхідні файли.

Тепер давайте спробуємо застосувати ефект а-ля Lightbox для окремої картинки. Створимо верстку для такої картинки:

Зараз ми побачимо превью невеликих розмірів, при кліці по якому ми перейдемо на нову сторінку з збільшеною копією зображення.

Топ плагинов jQuery. Плагин Magnific Popup

Це вкрай незручно і суть ефекту лайтбокс полягає в тому, щоб не завантажувати нову сторінку з однією картинкою, а відкрити цю картинку тут же, в модальному вікні. Для цього застосуємо метод magnificPopup() до ссылке з картинкою:

$(function() {
$(‘.popup-link’).magnificPopup({
type: ‘image’
});
});

Власне, все, базовий ефект роботи плагіна ми реалізували:

Топ плагинов jQuery. Плагин Magnific Popup

Далі залишається використовувати різні опції плагіна для його налаштування. Наприклад, ми можемо додати ефект збільшення зображення (Zoom):

$(‘.popup-link’).magnificPopup({
type: ‘image’,
zoom: {
enabled: true,
duration: 300
}
});

Зображення можна також групувати, отримуючи тим самим галерею зображень. Для цього досить обернути шукану групу зображень в блок і викликати методу плагіна вже для всього блоку:


$(function() {
$(‘.popup-link’).magnificPopup({
представник: ‘a’,
type: ‘image’,
gallery: {
enabled: true,
},
zoom: {
enabled: true,
duration: 300
}
});
});

В результаті ми досягли ефекту галереї зображень:

Топ плагинов jQuery. Плагин Magnific Popup

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