Плагин FancyBox

API и опции к FancyBox 1.3.4

Доступные опции

Влиять на работу плагина fancyBox можно при помощи пользовательских настроек, для этого передайте функции fancybox пользовательскую константу { … }, в которой должны содержаться пользовательские настройки вида 'ключ: значение'.

Ключ	Значение по умолчанию	Описание
padding	10	Пространство между оболочкой и контеном (изображением)
margin	20	Пространство между областью просмотра и оболочкой (контейнером FancyBox)
opacity	false	Когда true, прозрачность контена меняется при переходах (elastic)
modal	false	Когда true, для 'overlayShow' ставится 'true' и для 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' ставится 'false'
cyclic	false	Когда true, то пользователи смогут перейти к первому изображению при достижении последнего изображения, щелкнув по кнопке 'Вперед', а также перейти к последнему, находясь на первом, кликнув по кнопке 'Назад'
scrolling	'auto'	Передает значение для свойства CSS overflow, требуется для скрытия полосы прокрутки. Возможные варианты: 'auto', 'yes', или 'no'
width	560	Ширина контента для типов 'iframe' и 'swf'. Также ставится для строчного контента, если 'autoDimensions' равно 'false'
height	340	Высота контента для типов 'iframe' and 'swf'. Также ставится для строчного контента, если ''autoDimensions' равно 'false'
autoScale	true	Если true, FancyBox масштабируется в пределах области просмотра.
autoDimensions	true	Для строчного и ajax контента, подгоняет размеры области просмотра к размеру элемента. Убедись, что у него заданы размеры, в противном случае это может привести к непредсказуемым результатам.
centerOnScroll	false	Когда true, FancyBox центрируется при прокрутке (скроллинге) страницы
ajax	{ }	Опции Ajax. Отметьте: 'error' и 'success' будут перезаписаны FancyBox
swf	{wmode: 'transparent'}	Параметр выставляется для swf объекта
hideOnOverlayClick	true	Включает/выключает закрытие FancyBox при клике на странице
hideOnContentClick	false	Включает/выключает закрытие FancyBox при клике на контенте
overlayShow	true	Включить/выключить фон за пределами FancyBox
overlayOpacity	0.3	Прозрачность фона за пределами FancyBox (от 0 к 1; по умолчанию - 0.3)
overlayColor	'#666'	Цвет фона за пределами FancyBox
titleShow	true	Включить/выключить показ атрибута title
titlePosition	'outside'	Позиция атрибута title. Можно поставить 'outside', 'inside' или 'over'
titleFormat	null	Функция обратного вызова для темизации области title. Вы можете поставить любой html - счетчик в виде изображения или обычную навигацию.
transitionIn, transitionOut	'fade'	Эти две настройки контролирует то, как крупное изображение появляется (переход) на экране. Могут принимать значения 'elastic', 'fade' или 'none'
speedIn, speedOut	300	Скорость fade и elastic переходов в миллисекундах
changeSpeed	300	Скорость изменения рамки при переходе от одного изображения к другому, в миллисекундах
changeFade	'fast'	Скорость проявления контента при смене пунктов галереи
easingIn, easingOut	'swing'	Используется, если значения transitionIn, transitionOut равны elastic. Принимают значения easing-плагина
showCloseButton	true	Включить/выключить отображение кнопки закрыть
showNavArrows	true	Включить/выключить отображение стрелок навигации
enableEscapeButton	true	Включить/выключить закрытие FancyBox по нажатию на кнопке Esc
onStart	null	Функция, будет вызвана перед попыткой загрузить контент
onCancel	null	Функция, будет вызвана после отмены загрузки
onComplete	null	Функция, может быть вызвана однажды после показа контента
onCleanup	null	Функция, вызывается только перед закрытием
onClosed	null	Функция, вызывается один раз после закрытия FancyBox

Публичные функции

Метод	Описание
$.fancybox.showActivity	Показывает загрузку анимации
$.fancybox.hideActivity	Скрывает загрузку анимации
$.fancybox.next	Показывает следующий элемент галереи
$.fancybox.prev	Показывает предыдущий элемент галереи
$.fancybox.pos	Показывает элемент галереи по заданному индексу
$.fancybox.cancel	Отменяет загрузку контента
$.fancybox.close	Скрывает FancyBox Для iframe использовать - parent.$.fancybox.close();
$.fancybox.resize	Автоматически подстраивает размеры FancyBox: высота FancyBox подстраивается под высоту контента
$.fancybox.center	Центрирует FancyBox в области просмотра

Официальная страничка плагина FancyBox версии 1.3+

fancyBox2

Демонстрация работы плагина fancyBox1:

demo

Демонстрация работы плагина fancyBox2: