наверх

Подключение и настройка FancyBox 3

Не так давно вышла новая версия плагина FancyBox, давайте разберемся как теперь он работает.

Новую версию плагина можно скачать здесь https://fancyapps.com/fancybox/3/

После того как вы, не забыв подключить библиотеку jQuery, положили скачанные файлы в папку своего сайта их нужно подключить:

Теперь для того чтобы использовать FancyBox не нужно вызывать его каким-то особенным образом. Нужно просто добавить нужной ссылке атрибут data-fancybox:

Значение data-fancybox может быть любым, но чтобы объединить изображения в галерею нужно задать для этого атрибута одинаковое значение. Надпись для изображения можно вывести добавив ее в атрибут data-caption:

Резултьтат:

Видео в модальном окне с помощью fancybox

Для того чтобы использовать модальное окно для показа любого видео (с YouTube, лежащего на вашем сервере и т.д), нужно просто указать ссылку на него в атрибуте href и добавить атрибут data-fancybox. Для настройки размеров видео используют атрибуты data-width и data-height:

Результат: YouTube video

Свой контент в модальном окне

Fancybox можно использовать для отображения любого HTML-элемента на странице. Особенно часто его используют для показа форм в модальных окнах. Сначала следует создать скрытый элемент с уникальным идентификатором:

Затем просто создайте ссылку, имеющую атрибут data-src, который соответствует идентификатору элемента, который нужно открыть (с предшествующей хэш-меткой (#):

Результат:

Показать форму

Сценарий добавит небольшую кнопку закрытия. Если вы не хотите этого, то ее можно отключить с помощью smallBtn:false.

В модальном окне fancybox, так же можно сделать прокрутку контента добавив скролл. Посмотреть демо на CodePen

Загрузка контента с помощью Ajax

Чтобы загрузить контент через AJAX, нужно добавить data-type=»ajax»атрибут к ссылке:

Показать ррезультат:

Показать рыбу

Привязка fancybox к динамически добавляемым элементам

Для того чтобы привязать обработчик событий клика на элемент, следует использовать опцию selector. Она нужна для того, чтоб fancybox срабатывал на все элементы внутри указанного селектора, которые есть сейчас и которые могу появится потом. Все выбранные элементы будут автоматически сгруппированы в галерее.

Посмотреть демо на CodePen

Настройка FancyBox 3 с помощью JavaScript

Для того чтобы использовать свои настройки для вашего FancyBox нужно выбрать ваш элемент с помощью селектора jQuery и вызвать метод fancybox. Внутри метода можно настраивать опции:

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 скорость анимации во время просмотра слайд-шоу

 

JavaScript, jQuery, модальные окна