наверх

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

FancyBox — это популярный jQuery плагин, который служит для создания фото галерей и вывода другого контента в модальных окнах. Давайте познакомимся с этим чудо плагином поближе.

Материалы данной статьи устарели. Обновленная версия статьи здесь Подключение и настройка FancyBox 3

Не забудьте подключить библиотеку jQuery к вашему сайту если она еще не подключена.

Подключаем последнюю версию FancyBox скачанную с официального сайта http://fancybox.net/.

Вызов fancybox:

На все объекты с классом gallery мы повесили fancybox с параметрами по умолчанию. Теперь посмотрим как все это работает.

Одиночная картинка

Для того чтобы картинка увеличивалась при клике нужно сделать несколько простых шагов. Обернуть картинку ссылкой на увеличенную версию картинки и присвоить ей класс gallery.

Атрибут title тут выполняет роль подписи к картинке

Галерея картинок

Для того чтобы картинки можно было листать между собой, ссылкам в которые они обернуты нужно добавить атрибут rel=’group’.

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

Чтобы разместить в модальном окне свой контент, нужно повесить на ссылку по клику на которую он будет появляться, класс используемый при вызове FancyBox. В атрибуте href данной ссылки следует указать id вызываемого блока:

Данная возможность часто используется для создания всплывающих с формами обратной связи или роликами с Youtube.

Так же существует возможность показа контента из файла указанного в атрибуте href:

Более подробно о параметрах FancyBox

Все параметры указанные в таблице ниже, являются настройками плагина. Следует добавлять в вызов FancyBox:

Параметр По умолчанию Описание параметра
padding 10 Отступ между оберткой Fancybox и содержимым
margin 20 Отступ между Fancybox и окном браузера
opacity false Включение и отключение прозрачности при переходах
cyclic false Когда выбрано значение true, галерея станет циклической, переходы «вперед назад» будут бесконечными
scrolling ‘auto’ Возможность скрытия или отображения полосы прокрутки, CSS свойство overflow
width 560 Ширина для типа контента «IFRAME» или «SWF» так же применяется для параметра ‘autoDimensions’ если у последнего стоит значение ‘false’
height 340 Высота для типа контента «IFRAME» или «SWF» так же применяется для параметра ‘autoDimensions’ если у последнего стоит значение ‘false’
autoScale true Если значение true, то FancyBox масштабируется в окне
centerOnScroll false Если значение true, FancyBox будет по середине при прокрутке страницы
hideOnOverlayClick true При клике по слою «Overlay» закрывать FancyBox
hideOnContentClick false При клике по контенту закрывать FancyBox
overlayShow true Включить/выключить слой «Overlay»
overlayOpacity 0.3 Прозрачность слоя (от 0 до 1)
overlayColor ‘#555’ Цвет слоя «Overlay»
titleShow true Показывать «title»
titlePosition ‘outside’ Позиция title «За» «внутри» или «над» (‘outside’ ‘inside’ ‘over’)
titleFormat null Можно использовать html для темизации
transitionIn, transitionOut ‘fade’ Можно задать эффект между переходами или отключить ‘elastic’, ‘fade’ или ‘none’
speedIn, speedOut 300 Скорость эффектов перехода в миллисекундах
changeSpeed 300 Скорость эффекта
changeFade ‘fast’ Скорость исчезновения содержания при изменении пунктов галереи
easingIn, easingOut ‘swing’ Использование для ‘elastic’ анимации
showCloseButton true Показывать кнопку закрытия
showNavArrows true Показывать стрелочки для навигации
enableEscapeButton true По кнопке «ESC» закрывался FancyBox
JavaScript, jQuery, модальные окна