Подключение и настройка FancyBox 3
Не так давно вышла новая версия плагина FancyBox, давайте разберемся как теперь он работает.
Новую версию плагина можно скачать здесь https://fancyapps.com/fancybox/3/
После того как вы, не забыв подключить библиотеку jQuery, положили скачанные файлы в папку своего сайта их нужно подключить:
|
1 2 |
<link rel="stylesheet" href="путь к файлу/jquery.fancybox.min.css" /> <script src="путь к файлу/jquery.fancybox.min.js"></script> |
Теперь для того чтобы использовать FancyBox не нужно вызывать его каким-то особенным образом. Нужно просто добавить нужной ссылке атрибут data-fancybox:
|
1 2 3 |
<a data-fancybox="images" href="/img/gallery2.jpg" data-caption="fox1"><img src="/img/gallery2.jpg" /></a> <a data-fancybox="images" href="/img/gallery3.jpg" data-caption="fox2"><img src="/img/gallery3.jpg" /></a> <a data-fancybox="images" href="/img/gallery4.jpg" data-caption="fox3"><img src="/img/gallery4.jpg" /></a> |
Значение data-fancybox может быть любым, но чтобы объединить изображения в галерею нужно задать для этого атрибута одинаковое значение. Надпись для изображения можно вывести добавив ее в атрибут data-caption.
Видео в модальном окне с помощью fancybox
Для того чтобы использовать модальное окно для показа любого видео (с YouTube, лежащего на вашем сервере и т.д), нужно просто указать ссылку на него в атрибуте href и добавить атрибут data-fancybox. Для настройки размеров видео используют атрибуты data-width и data-height:
|
1 2 3 |
<a data-fancybox href="https://www.youtube.com/watch?v=tYlh0JmozGI" data-width="600" data-height="300"> YouTube video </a> |
Результат: YouTube video
Свой контент в модальном окне
Fancybox можно использовать для отображения любого HTML-элемента на странице. Особенно часто его используют для показа форм в модальных окнах. Сначала следует создать скрытый элемент с уникальным идентификатором:
|
1 2 3 4 5 6 7 8 9 |
<form method="post" action="sendmail.php" class="form" id="modal-form" style="display:none;"> <label for="name" class="form__label">Имя:</label> <input type="text" name="name" class="form__field"/> <label for="mail" class="form__label">E-mail:</label> <input type="text" name="mail" class="form__field"/> <label for="message" class="form__label">Сообщение:</label> <textarea name="message" class="form__area"></textarea> <input type="submit" value="Отправить" class="form__submit"/> </form> |
Затем просто создайте ссылку, имеющую атрибут data-src, который соответствует идентификатору элемента, который нужно открыть (с предшествующей хэш-меткой (#):
|
1 2 3 |
<a data-fancybox data-src="#modal-form" href="javascript:;"> Показать форму </a> |
Сценарий добавит небольшую кнопку закрытия. Если вы не хотите этого, то ее можно отключить с помощью smallBtn:false.
В модальном окне fancybox, так же можно сделать прокрутку контента добавив скролл. Посмотреть демо на CodePen
Загрузка контента с помощью Ajax
Чтобы загрузить контент через AJAX, нужно добавить data-type=»ajax»атрибут к ссылке:
|
1 |
<a data-fancybox data-type="ajax" data-src="/example/fish.html" href="#" >Показать рыбу</a> |
Привязка fancybox к динамически добавляемым элементам
Для того чтобы привязать обработчик событий клика на элемент, следует использовать опцию selector. Она нужна для того, чтоб fancybox срабатывал на все элементы внутри указанного селектора, которые есть сейчас и которые могу появится потом. Все выбранные элементы будут автоматически сгруппированы в галерее.
|
1 2 3 |
$().fancybox({ selector : '.imglist a:visible' }); |
Настройка FancyBox 3 с помощью JavaScript
Для того чтобы использовать свои настройки для вашего FancyBox нужно выбрать ваш элемент с помощью селектора jQuery и вызвать метод fancybox. Внутри метода можно настраивать опции:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
$('[data-fancybox="gallery"]').fancybox({ buttons : [ 'slideShow', 'share', 'zoom', 'fullScreen', 'download', 'close' ], loop: true, gutter : 10, keyboard: true, arrows: true, infobar: true, smallBtn: true, toolbar: false, protect: true, modal: true, idleTime: 3, animationEffect: "zoom-in-out", animationDuration: 600, transitionEffect: "rotate", transitionDuration: 400, slideClass: "myClass", baseClass: "myclass", slideShow: { autoStart: true, speed: 1000 }, youtube : { controls : 0, showinfo : 0 }, thumbs : { autoStart : true } }); |
btnTplslideShow
| Параметр | По умолчанию | Описание параметра |
|---|---|---|
| loop | false | зацикливает галерею |
| gutter | 50 | горизонтальный отступ между слайдами |
| keyboard | true | навигация с клавиатуры |
| arrows | true | показ стрелочек |
| arrowLeft и arrowRight | Позволяет задать свой шаблон для стрелочек | |
| infobar | true | Отображает счетчик слайдов в левом верхнем углу |
| smallBtn | auto | Отображает кнопку закрытия картинки(можно задать свой шаблон) |
| toolbar | auto | Отображает кнопки в верхнем правом углу. Может иметь значения true, false, «auto». Если задано значение «auto», то будет автоматически скрыт, если «smallBtn» включен. |
| protect | true | Запрещает ПКМ по изображению |
| idleTime | 3 | время в секундах по истечению которого исчезнет навигация при просмотре галереи |
| modal | false | Делает контент «модальным». Т.е. убирает навигацию с клавиатуры, кнопки и т.д. |
| animationEffect | zoom | Анимация во время всплывания/изчезновения окна. Возможные значения: «zoom», «fade», «zoom-in-out» |
| animationDuration | 366 | Скорость анимации во время всплывания/изчезновения окна. |
| transitionEffect | fade | Анимация при переходе от слайда к слайду. Возможные значения: ‘fade’, ‘slide’, ‘circular’, «tube’, ‘zoom-in-out’, ‘rotate’ |
| transitionDuration | 366 | Скорость анимации при переходе от слайда к слайду. |
| slideClass | — | Добавляет пользовательский класс к слайду. |
| baseClass | — | Добавляет пользовательский класс к обертке «fancybox-container». |
| baseTpl | — | Добавляет свою разметку шаблона. |
| spinnerTpl | — | Шаблон анимации при загрузке |
| thumbs | ||
| autoStart | false | отвечает за показ миниатюр при открытии галереи |
| slideShow | ||
| autoStart | false | отвечает за автоматический запуск пролистывания галереи после ее открытия |
| speed | 3000 | скорость пролистывания слайдов |
| youtube | ||
| controls | — | значение 0 скрывает панель управления |
| showinfo | — | значение 0 скрывает информацию |
| buttons | ||
| slideShow | — | запуск слайдшоу |
| share | — | рассказать в соцсетях |
| zoom | — | увеличение |
| fullScreen | — | развернуть на весь экран |
| close | — | кнопка закрыть |
| download | — | кнопка скачать |
| btnTpl | — | С помощью данной настройки можно задать шаблон для каждой из этих кнопок |
| autoStart | false | отвечает за автоматический запуск галереи при загрузке страницы |
| speed | 3000 | скорость анимации во время просмотра слайд-шоу |