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 к определенным элементам, то используется:
1 2 3 |
$('.my-element').fancybox({ /* настройки */ }); |
2. Использование
Fancybox может отображать в модальных окнах изображения, видео, iframes и любой HTML-контент. Для этого плагин имеет много дополнительных атрибутов и JS вариантов, но в этой теме описаны только основные. Более подробную информацию можно посмотреть в первоисточнике.
2.1 Изображения
Для показа галереи фотографии все ее элементы должны содержать одинаковое значение атрибута data-fancybox="gallery"
. Для одиночного фото этот атрибут может быть пустым data-fancybox
. Атрибут data-caption
используется для описания изображения и является не обязательным.
1 2 3 |
<a href="image.jpg" data-fancybox="gallery" data-caption="Описание фотографии"> <img src="thumbnail.jpg" alt="" /> </a> |
2.2 Видео
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<a data-fancybox="" href="https://www.youtube.com/watch?v=30BQjlXXamY"> YouTube </a> <a data-fancybox="" href="https://vimeo.com/151297208"> Vimeo </a> <a data-fancybox="" href="video.mp4"> Ссылка на файл MP4 </a> <a data-fancybox="" href="#myVideo"> HTML5 элемент </a> <video controls id="myVideo" style="display:none;"> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> </video> |
Для видео можно добавить значение атрибута data-fancybox
для создания галереи/плейлиста и описание data-caption
2.2.1 Видео с поддержкой Rutube
Вместо оригинального JS плагина подключаем: jquery.fancybox.rutube.js или минимизированный jquery.fancybox.rutube.min.js
Решение найдено на github у пользователя evikza
2.3 Фрейм <iframe>
1 2 3 |
<a data-fancybox="" data-type="iframe" data-src="https://fancyapps.com/fancybox/3/docs/#iframe" href="javascript:;"> Ссылка на страницу </a> |
Обязательный атрибут data-type="iframe"
и data-src
, который указывает ссылку на страницу или PDF документ.
Также можно добавить значение для data-fancybox
и атрибут data-caption
2.4 Встроенный HTML-элемент
1 2 3 4 5 6 |
<a data-fancybox="" data-src="#hidden-content" href="javascript:;"> Открыть окно </a> <div style="display: none;" id="hidden-content"> Встроенный HTML-элемент </div> |
Атрибут data-src
указывает на ID элемента, который будет показан в модальном окне
Можно добавить атрибут data-caption
и значение data-fancybox
2.5 Ajax
1 2 3 |
<a data-fancybox="" data-type="ajax" data-src="/demo/somefile.html" href="javascript:;"> Открыть </a> |
Обязательный атрибут data-type="ajax"
и data-src
, который указывает ссылку на подгружаемый контент.
Как и во всех предыдущих случаях, можно добавить data-caption
и значение data-fancybox
3. Основные настройки
Тут описаны лишь основные настройки. Шаблоны, мобильные и редко используемые конфигурации можно посмотреть в полном списке
Пример использования:
1 2 3 4 |
$('[data-fancybox="gallery"]').fancybox({ loop: true, autoFocus: false }); |
По умолчанию они имеют следующие значения:
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. События
Пример использования:
1 2 3 4 5 |
$('[data-fancybox="gallery"]').fancybox({ afterShow: function () { /* код */ } }); |
beforeLoad
Вызывается перед загрузкой содержимого
afterLoad
Вызывается после загрузки содержимого
beforeShow
Вызывается перед показом окна
afterShow
Вызывается после показа окна
beforeClose
Вызывается перед закрытием окна
afterClose
Вызывается после закрытием окна
onInit
Вызывается когда окно было инициализировано
onActivate
Вызывается когда окно выводится на передний план
onDeactivate
Вызывается когда было активировано другое окно
5. Тема оформления
Вместо родного стиля fancybox подключаем стиль jquery.fancybox.atuin.css и инициализирум:
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 |
$('[data-fancybox]').fancybox({ /* Стрелки влево и вправо */ btnTpl: { arrowLeft: '<button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left" title="{{PREV}}">' + '<svg viewBox="0 0 154 109"><symbol id="Arrow" viewBox="-73.9 -55.3 135.9 85.4"><g><polygon points="-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 "/></g><g><polygon points="-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 "/></g></symbol><use xlink:href="#Arrow" width="135.9" height="85.4" id="XMLID_1_" x="-73.9" y="-55.3" transform="matrix(1.007 0 0 -1.007 83.0005 42)" /></svg>' + "</button>", arrowRight: '<button data-fancybox-next class="fancybox-button fancybox-button--arrow_right" title="{{NEXT}}">' + '<svg viewBox="0 0 154 109"><symbol id="Arrow" viewBox="-73.9 -55.3 135.9 85.4"><g><polygon points="-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 "/></g><g><polygon points="-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 "/></g></symbol><use xlink:href="#Arrow" width="135.9" height="85.4" id="XMLID_1_" x="-73.9" y="-55.3" transform="matrix(1.007 0 0 -1.007 83.0005 42)" /></svg>' + "</button>" }, /* Руссификация */ lang: "ru", i18n: { ru: { CLOSE: "Закрыть", NEXT: "Следующий", PREV: "Предыдущий", ERROR: "Контент не может быть загружен. <br/> Попробуйте позже.", PLAY_START: "Начать слайдшоу", PLAY_STOP: "Остановить слайдшоу", FULL_SCREEN: "Полный экран", THUMBS: "Эскизы", DOWNLOAD: "Скачать", SHARE: "Поделиться", ZOOM: "Увеличить" } } }); |
6. Источники, копирайты и лицензия
- Fancybox на github.com
- Сайт разработчиков: fancyapps.com
- Лицензия fancybox
- Фотографии в примерах: kellepics
Как отцентрировать миниатюры при их расположении внизу экрана?
Здравствуйте, подскажите пожалуйста, вроде всё сделал, но почему то у меня не появляются стрелки пролистывания и вверху крестик не видно, не подскажите в чём причина?
Нужно результат видеть, так сложно сказать.
Командир, в свете того, что скоро Трубу закроют, может, внедрите пруф, как делать в Fancybox видео из ВК))
Фреймом
Получаем у ВК код видео, выбрав "Копировать код для встраивания", он будет примерно таким:
И дальше эту ссылку ставим как фрейм:
Доброго времени суток, ну подскажите пожалуйста, можно ли видео с ютуб что:
Сделать без картинки превью, а так как оно есть.
Не совсем понял, если видео вставлять как оно есть, зачем вообще fancybox, а если с текстом YouTube, то просто не нужно ставить картинку:
Здравствуйте! было бы здорово если б html содержимое можно было листать крутя колесико мыши, не подскажите как это реализовать?
Есть несколько встроенных HTML элементов, которые идут как галерея?
Добавьте в настройки wheel: "",
Доброго дня!
А скажите, если несколько кнопок iframe, соответственно, открываемых окон, а можно ли их сделать с возможностью перехода, как в случаях с гелереями фото и видео?
Спасибо!
Прописать на все одно значение, например:
Здравствуйте!
Скажите, а Вы пробовали ifreme открывать, если ссылка будет с http, а не https?
Откроется?
Спасибо!
Если сайт на https, а фрейм открывается через http, то скорее всего он будет заблокирован.
Мозила, например, так пишет:
Заблокирована загрузка смешанного активного содержимого «http://site.ru/»
Ок. Спасибо, будем пробовать)
Отличное решение, особенно Ваша стилизация - потрясающая!!