Открыть меню    

Плагин FancyBox

API и опции к FancyBox 1.3.4

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

fancybox Влиять на работу плагина 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:

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

Официальная документация fancyBox2 доступна на сайте fancyapps.com

Примечание:

  1. Для группировки («перелистывания») изображений используйте атрибут rel, соответственно, у ссылок содержащих изображения.

Комментарии к статье

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