1. Установка

• Подключаем CSS: jquery.fancybox.css или минимизированную jquery.fancybox.min.css
• Подключаем jQuery (если не подключена ранее)
• Подключаем JS: jquery.fancybox.js или минимизированную jquery.fancybox.min.js

Ссылки даны на необходимые файлы версии 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.2.1 Видео с поддержкой Rutube

Вместо оригинального JS плагина подключаем: jquery.fancybox.rutube.js или минимизированный jquery.fancybox.rutube.min.js

Решение найдено на github у пользователя evikza

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. Источники, копирайты и лицензия

• Fancybox на github.com
• Сайт разработчиков: fancyapps.com
• Лицензия fancybox
• Фотографии в примерах: kellepics