От автора: приветствую вас, друзья. Мы продолжаем знакомиться с замечательными плагинами jQuery, позволяющими решить большой круг различных задач. В этой статье мы познакомимся с простым плагином модальных окон, который на все 100 решает поставленные перед ним задачи — показ контента в модальном окне с эффектом анимации.
Плагинов, аналогичных плагину Magnific Popup — десятки и сотни. У кого-то есть свои «любимчики», которые используются в каждом проекте, кто-то постоянно экспериментирует и для каждого нового проекта ищет новые плагин для показа картинок в модальном окне. Сегодня мы также поэкспериментируем и рассмотрим плагин Magnific Popup, о котором я узнал относительно недавно.
К преимуществам плагина можно отнести его адаптивность, а также относительно небольшой вес. Скачайте архив с плагином с сайта GitHub и подключите необходимые файлы.
|
1 2 3 |
<link rel="stylesheet" href="css/magnific-popup.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.magnific-popup.js"></script> |
Теперь давайте попробуем применить эффект а-ля Lightbox для отдельной картинки. Создадим верстку для такой картинки:
|
1 |
<a class="popup-link" href="images/tiger.jpg"><img src="images/s_tiger.jpg" alt=""></a> |
Сейчас мы увидим превью небольших размеров, при клике по которому мы перейдем на новую страницу с увеличенной копией изображения.
Это крайне неудобно и суть эффекта лайтбокс состоит в том, чтобы не загружать новую страницу с одной картинкой, а открыть эту картинку здесь же, в модальном окне. Для этого применим метод magnificPopup() к ссылке с картинкой:
|
1 2 3 4 5 |
$(function() { $('.popup-link').magnificPopup({ type: 'image' }); }); |
Собственно, все, базовый эффект работы плагина мы реализовали:
Дальше остается использовать различные опции плагина для его настройки. Например, мы можем добавить эффект увеличения картинки (Zoom):
|
1 2 3 4 5 6 7 |
$('.popup-link').magnificPopup({ type: 'image', zoom: { enabled: true, duration: 300 } }); |
Также изображения можно группировать, получая тем самым галерею изображений. Для этого достаточно обернуть искомую группу изображений в блок и вызывать метода плагина уже для всего блока:
|
1 2 3 4 |
<div class="popup-link"> <a href="images/tiger.jpg"><img src="images/s_tiger.jpg" alt=""></a> <a href="images/bears.jpg"><img src="images/s_bears.jpg" alt=""></a> </div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function() { $('.popup-link').magnificPopup({ delegate: 'a', type: 'image', gallery: { enabled: true, }, zoom: { enabled: true, duration: 300 } }); }); |
В результате мы добились эффекта галереи изображений:
Ну а у меня на сегодня все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и библиотеке jQuery UI вы можете узнать из наших уроков или курса. Удачи!
