Fancybox 3 с темой оформления

Fancybox — один из самых популярных плагинов на jQuery для реализации модальных окон.

В этой теме рассмотрена его быстрое подключение и настройка. А также добавлена альтернативная тема оформления, позволяющая немного разнообразить его стандартный вид.

1. Установка

Ссылки даны на необходимые файлы версии 3.5.7. Более новую версию или дополнительную информацию можно посмотреть на сайтах github.com и fancyapps.com

Если использовать стандартные настройки и атрибуты, то инициализировать скрипт нет необходимости.

Если нужно подключить fancybox к определенным элементам, то используется:

2. Использование

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

2.1 Изображения

Для показа галереи фотографии все ее элементы должны содержать одинаковое значение атрибута data-fancybox="gallery". Для одиночного фото этот атрибут может быть пустым data-fancybox. Атрибут data-caption используется для описания изображения и является не обязательным.

2.2 Видео

Для видео можно добавить значение атрибута data-fancybox для создания галереи/плейлиста и описание data-caption

2.3 Фрейм <iframe>

Обязательный атрибут data-type="iframe" и data-src, который указывает ссылку на страницу или PDF документ.

Также можно добавить значение для data-fancybox и атрибут data-caption

2.4 Встроенный HTML-элемент

Атрибут data-src указывает на ID элемента, который будет показан в модальном окне

Можно добавить атрибут data-caption и значение data-fancybox

2.5 Ajax

Обязательный атрибут data-type="ajax" и data-src, который указывает ссылку на подгружаемый контент.

Как и во всех предыдущих случаях, можно добавить data-caption и значение data-fancybox

3. Основные настройки

Тут описаны лишь основные настройки. Шаблоны, мобильные и редко используемые конфигурации можно посмотреть в полном списке

Пример использования:

По умолчанию они имеют следующие значения:

loop: false

Включает бесконечную навигацию по галерее.


gutter: 50

Горизонтальное расстояние между слайдами.


keyboard: true

Включает навигацию с помощью клавиатуры.


preventCaptionOverlap: true

Запрещает подписи модального окна перекрывать его содержимое. Значение false - разрешает.


arrows: true

Показывает навигационные стрелки по краям экрана (для галереи)


infobar: true

Показывает счетчик изображений в верхнем левом углу (для галереи)


smallBtn: "auto"

Маленькая кнопка закрытия модального окна

"auto" - автоматически включена для "html", "inline" или "ajax" окон

true - включена для всех окон

false - выключена для всех


toolbar: "auto"

Показывает тулбар (справа вверху)

"auto" - автоматически выключится, если активен smallBtn

true - включен для всех окон

false - выключен для всех


buttons: [
   "zoom",
   //"share",
   "slideShow",
   //"fullScreen",
   //"download",
   "thumbs",
   "close"
],

Устанавливает, какие кнопки будут показаны в тулбаре


protect: false

Отключает правую кнопку мыши и использует простую защиту изображений


modal: false

Делает контент "модальным" - отключает навигацию по клавиатуре, кнопки закрытия и т. д


animationEffect: "zoom"

Анимационный эффект открытия и закрытия окон

false - выключен

"zoom" - увеличение изображения из эскиза и уменьшение в него при закрытии

"zoom-in-out"

"fade"


animationDuration: 366

Продолжительность эффекта анимации


zoomOpacity: "auto"

Прозрачность при открытии и закрытии


transitionEffect: "fade"

Эффект перехода между слайдами

Может быть: "fade", "slide", "circular", "tube", "zoom-in-out", "rotate" или false (без эффекта)


transitionDuration: 366

Продолжительность эффекта перехода между слайдами


hideScrollbar: true

Скрывает вертикальную полосу прокрутки браузера


autoFocus: true

Устанавливает фокус на первом фокусируемом элементе после открытия


backFocus: true

Ставит фокус обратно на активный элемент после закрытия


trapFocus: true

Не позволяет пользователю сфокусироваться на элементе вне модального контента


fullScreen: {
   autoStart: false
}

Открывает окна в полный экран


touch: {
   vertical: true,
   momentum: true
},

vertical - разрешает перетаскивание содержимого по вертикали

momentum - продолжайте движение после освобождения мыши / касания


slideShow: {
   autoStart: false,
   speed: 3000
},

Автоматически включает слайдшоу с заданной скоростью.


thumbs: {
   autoStart: false,
   hideOnClose: true,
   parentEl: ".fancybox-container",
   axis: "y"
},

autoStart - отображение миниатюр при открытии

hideOnClose - скрывает сетку миниатюр, когда начинается анимация закрытия

parentEl - родительский элемент

axis - вертикальная (y) или горизонтальная (x) прокрутка


wheel: "auto"

Прокрутка изображений колесом мышки


clickSlide: "close"

Закрытие окна по клику вне его. false - отключает

4. События

Пример использования:

beforeLoad

Вызывается перед загрузкой содержимого


afterLoad

Вызывается после загрузки содержимого


beforeShow

Вызывается перед показом окна


afterShow

Вызывается после показа окна


beforeClose

Вызывается перед закрытием окна


afterClose

Вызывается после закрытием окна


onInit

Вызывается когда окно было инициализировано


onActivate

Вызывается когда окно выводится на передний план


onDeactivate

Вызывается когда было активировано другое окно

5. Тема оформления

Вместо родного стиля fancybox подключаем стиль jquery.fancybox.atuin.css и инициализирум:

6. Источники, копирайты и лицензия

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!