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

44

Від автора: вітаю вас, друзі. Продовжуємо знайомитися з колекцією ТОП плагінів jQuery. На черзі у нас ще один плагін, що реалізує ефект а-ля Lightbox – це плагін fancyBox. Дуже потужний і зручний плагін модальних вікон для контенту, повз яку пройти просто неможливо.

Отже, давайте розглянемо приклади роботи з плагіном fancyBox – одним з кращих у своєму роді і, мабуть, моїм найулюбленішим плагіном лайтбокс, оскільки його я використовую практично в кожному своєму проекті.

Офіційний сайт fancyBox пропонує нам відмінну документацію з безліччю прикладів, які показують, як відкривати в модальному вікні лайбокс різні варіанти контенту: одиночне фото, групу зображень, відео, флеш, фрейм, карти Google, завантажувати контент з допомогою AJAX і т. д. Як бачимо, дійсно потужний плагін.

Завантажити актуальну версію fancyBox (версія 2.1.5 на момент написання статті) і підключимо його файли.

Це обов’язкові файли, решта файлів плагіна є опціональними. Тепер давайте додамо лайтбокс ефект для одиночної картинки. Розмітка може бути приблизно такою:

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

$(function() {
$(«.fancybox»).fancybox();
});

Тепер при кліці по мініатюрі в модальному вікні буде показано оригінальне зображення. При цьому поява зображення буде супроводжуватися приємною анімацією.

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

Також fancyBox дозволяє групувати картинки, створюючи галереї, для цього досить додати группируемым картинок атрибут rel з однаковим значенням. Давайте додамо ще кілька зображень і об’єднаємо їх в групу.




Тепер при відкритті будь-якої картинки ми будемо бачити стрілки вліво і вправо, які дозволяють перемикатися між зображеннями.

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

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

Для кожної картинки можна додавати підпис, що буде показана під зображенням. Робиться це через атрибут title посилання:

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

Ну і, звичайно ж, плагін пропонує нам безліч опцій, використовуючи які, ми можемо налаштувати fancyBox під себе: змінювати ефект анімації, оформлення, події та інше.

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