Параметры 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
onStart null Будет вызван первым до загрузки содержимого
onCancel null Будет вызван после отмены загрузки
onComplete null Будет вызван после показа контента
onCleanup null Будет вызван перед закрытием
onClosed null Будет вызван после закрытия FancyBox

Примеры работы с Fancybox:

1) Запуск модального окна Fancybox по ссылке:

<a href="#modal" class="zoom">Вывод модального окна</a>

<div class="display:none;">
   <div class="modal">...</div>
</div>

$(function() {
   $(".zoom").fancybox({ 'hideOnContentClick' : true });
});

2) Запуск модального окна Fancybox скриптом:

$(window).load(function(){
   $.fancybox({
      'href' : '#city_select',
      'hideOnOverlayClick' : false
   });
});

3) Изменить разметку подписи к окну Fancybox и скрыть саму подпись:

function formatTitle(title, currentArray, currentIndex, currentOpts) {
   return '<div class="city_title">' + title + '</div>';
}

$(function() {
   $(".zoom").fancybox({ 'hideOnContentClick' : false, 'titleShow': false, 'titleFormat' : formatTitle });
});

Теги: настройки библиотеки Fancybox

Параметры Fancybox

Еще нет своего сайта? Создайте интернет-магазин на платформе 5CMS - Все для продаж уже внутри!

Рекомендуем прочитать