Fancybox: изменяемые параметры запуска скрипта

Рекомендую хостинг которым я пользуюсь

Hosting Ukraine
Fancybox 2 основные параметры запуска скрипта.

Fancybox как и большинство подобных скриптов имеет изменяемые параметры запуска, или как их называют ключи. Они влияют на как скрипт будет выполнять те или иные задачи.

Вы можете передать эти параметры как ключ/значение объекта FancyBox(). Кроме того, можно изменить значения по умолчанию непосредственно в FancyBox JS файле или с помощью $.fancybox.defaults.

Название Описание параметра/ключа
padding Отступы вокруг контента. Могут быть указаны как массив - [TOP, RIGHT, BOTTOM, LEFT].Тип значения: целое число, массив.
По умолчанию: 15.
margin Минимальное расстояние между окном Fancybox и границами окна браузера. Нижнее и правое значение игнорируются если размер контента превышает размеры окна браузера.Тип значения: целое число, массив.
По умолчанию: 20.
width Ширина по умолчанию для IFRAME или SWF типа контента. Так же работает для INLINE, AJAX и HTML если параметр autoSize имеет значение FALSE. Может принимать числовые значения или значение AUTO.Тип значения: числовое, строчное.
По умолчанию: 800.
height Высота по умолчанию для IFRAME или SWF типа контента. Так же работает для INLINE, AJAX и HTML если параметр autoSize имеет значение FALSE. Может принимать числовые значения или значение auto.Тип значения: числовое, строчное.
По умолчанию: 600.
 minWidth Минимальная ширина FancyBox, до которой может изменяться размер окна.Тип значения: числовое.
По умолчанию: 100.
minHeight Минимальная высота FancyBox, до которой может изменяться размер окна.Тип значения: числовое.
По умолчанию: 100.
maxWidth Максимальная ширина FancyBox, до которой может изменяться размер окна.Тип значения: числовое.
По умолчанию: 9999
maxHeight Максимальная высота FancyBox, до которой может изменяться размер окна.Тип значения: числовое.
По умолчанию: 9999.
autoSize Если значение установлено TRUE то autoHeight и autoWidth тоже устанавливается в TRUE.Тип значения: булево.
По умолчанию: TRUE.
autoHeight Если значение установлено TRUE, то для типов контента INLINE, AJAX и HTML высота будет определяться автоматически. Если размеры не заданы, это может дать неожиданные результаты.Тип значения: булево.
По умолчанию: FALSE.
autoWidth Если значение установлено true, то для типов контента INLINE, AJAX и HTML ширина будет определяться автоматически. Если размеры не заданы, это может дать неожиданные результаты.Тип значения: булево.
По умолчанию: FALSE.
autoResize Если значение установлено в TRUE, то размеры окна будут меняться в момент изменения размера окна.Тип значения: булево.
По умолчанию: !isTouch.
autoCenter Если значение установлено в TRUE, контент всегда будет выравниваться по центру.Тип значения: булево.
По умолчанию: !isTouch.
fitToView Если значение установлено в TRUE, то окошко Fancybox будет пытаться поместиться в видимую часть экрана еще до открытия окошка.Тип значения: булево.
По умолчанию: TRUE.
aspectRatio Если значение установлено в TRUE, то при изменении размеров окна соотношение сторон содержимого по возможности будет сохраняться (изображение всегда сохраняет свои пропорции).Тип значения: булево.
По умолчанию: FALSE.
topRatio Выравнивание по высоте. Если имеет значение 0.5, то значение верхнего и нижнего отступа от краев экрана будут равны. Если имеет значение 0, Fancybox будет прилипать к верхней части окна браузера.Тип значения: числовое.
По умолчанию: 0.5.
leftRatio Выравнивание по горизонтали. Если имеет значение 0.5, то значение левого и правого отступа от краев экрана будут равны. Если имеет значение 0, Fancybox будет прилипать к левой части окна браузера.Тип значения: числовое.
По умолчанию: 0.5.
scrolling Это параметр переопределяет стили CSS для отображения или скрытия полосы прокрутки. Может принимать значения AUTO, YES, NO или VISIBLE.Тип значения: строчное.
По умолчанию: AUTO.
wrapCSS  Позволяет добавить контейнеру всплывающего окна Fancybox любой свой класс. Может быть полезно, например, когда у вас на странице несколько типов контента, изменить оформление одного из типов.
arrows Если параметр имеет значение TRUE, стрелки навигации будут отображаться.Тип значения: булево.
По умолчанию: TRUE.
closeBtn Если параметр имеет значение TRUE, кнопка ЗАКРЫТЬ будут отображаться.Тип значения: булево.
По умолчанию: TRUE.
closeClick Если установлено значение TRUE, FancyBox будет закрыт, когда пользователь кликает на содержании.Тип значения: булево.
По умолчанию: FALSE.
nextClick Если установлено значение TRUE, Fancybox будет переключаться на следующее изображение галереи при клике на содержимом.Тип значения: булево.
По умолчанию: FALSE.
mouseWheel Если установлено значение TRUE, у пользователя будет возможность переключаться между изображениями галереи при помощи колесика мыши.Тип значения: булево.
По умолчанию: TRUE.
autoPlay Если установлено значение TRUE, слайдшоу начнет автоматически работать после открытия первого изображения галереи.Тип значения: булево.
По умолчанию: FALSE.
playSpeed Скорость переключения между изображениями слайдшоу в милисекундах.Тип значения: целое.
По умолчанию: 3000.
preload Количество предварительно загружаемых изображений галереи. Результат никак не виден пользователю, позволяет избежать видимой подгрузки изображений при переключении между ними в слайдшоу.Тип значения: целое.
По умолчанию: 3.
modal Позволяет отключить элементы управления и скрыть кнопку закрытия окна Fancybox. Скорее всего нужно на тех сайтах где за то чтобы убрать окошко требуют подписку на новости или лайк :))Тип значения: булево.
По умолчанию: FALSE.
loop Если установлено значение TRUE, это включают циклическую навигацию. Это значит, что кликая по кнопке "Next" после достижения последнего элемента, вам снова отобразиться первый элемент (и наоборот).Тип значения: булево.
По умолчанию: TRUE.
ajax Опции для AJAX запросов.Тип значения: Object;Значение по умолчанию:

{
dataType : 'html',
headers : { 'X-fancyBox': true }
}

iframe Опции для типа контента IFRAME.Тип значения: Object;Значение по умолчанию:

{
scrolling : 'auto',
preload : true
}

swf Опции для типа контента SWF

{
wmode: 'transparent',
allowfullscreen : 'true',
allowscriptaccess : 'always'
}

keys Можно переопределить кнопки клавиатуры для управления слайдшоу и его закрытия.Тип значения: Object;Значение по умолчанию:

{
{
next : {
13 : 'left', // enter
34 : 'up', // page down
39 : 'left', // right arrow
40 : 'up' // down arrow
},
prev : {
8 : 'right', // backspace
33 : 'down', // page up
37 : 'right', // left arrow
38 : 'down' // up arrow
},
close : [27], // escape key
play : [32], // space - start/stop slideshow
toggle : [70] // letter "f" - toggle fullscreen
}
}

direction Расположение элементов управления по умолчанию (применимо так же и для стрелок навигации).Тип значения: Object;Значение по умолчанию:

{
{
next : 'left',
prev : 'right'
}
}
scrollOutside Если установлено значение TRUE, то скрипт Fancybox будет пытаться избежать появления горизонтальной прокрутки у типов контента IFRAME и HTML.Тип значения: булево.
По умолчанию: TRUE.
index Подменяет для группы элементов начальный индекс.Тип значения: целое.
По умолчанию: 0.
type Позволяет установить тип контента и не заставлять Fancybox питаться его угадывать.Поддерживает значения:

  • image;
  • inline;
  • ajax;
  • iframe;
  • swf;
  • html

Тип значения: строчное.
По умолчанию: NULL.

href Позволяет указать источник контента.Тип значения: строчное.
По умолчанию: NULL.
content Будет отображаться указанный тут контент вместо того что указан в коде, обрабатываемом скриптом.Тип значения: строчное.
По умолчанию: NULL.
title Позволяет заменить название любого элемента, применимо ко всем тегам html
tpl Позволяет переопределить (заменить) стандартные шаблоны для всех типов контента.Тип значения: Object;Значение по умолчанию:

{
wrap : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
image : '<img class="fancybox-image" src="{href}" alt="" />',
iframe : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0"' + ($.browser.msie ? ' allowtransparency="true"' : '') + '></iframe>',
error : '<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>',
closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>',
next : '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',
prev : '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'
}
openEffect /
closeEffect /
nextEffect /
prevEffect
Позволяет указать тип анимации перехода:

  • elastic - плавный
  • fade - исчезающий
  • none

Тип значения: строчное.
По умолчанию: elastic, fade, none.

openSpeed /
closeSpeed /
nextSpeed /
prevSpeed
Время перехода между слайдами:

  • 250 - значение в миллисекундах
  • slow - медленно
  • normal - обычное
  • fast - быстрое

Тип значения: строчное.
По умолчанию: elastic, fade, none.

openEasing /
closeEasing /
nextEasing /
prevEasing
Метод Easing для всех типов перехода. У вас появиться множество дополнительных опций если этот плагин подключен.Тип значения: строчное.
По умолчанию: swing.
openOpacity /
closeOpacity
Если установлено значение TRUE, то при переходах слайдшоу будет применяться прозрачность.Тип значения: булево.
По умолчанию: TRUE.
openMethod /
closeMethod /
nextMethod /
prevMethod
Метод $.fancybox.transitions() управляет переходами. Именно с его помощью можно добавить свои варианты переходов.Тип значения: строчное.
По умолчанию: 'zoomIn' / 'zoomOut' / 'changeIn' / 'changeOut'.
helpers Объект содержит список подключенных помощников и параметры работы для них.Тип значения: Object;
По умолчанию:

{
overlay : {
closeClick : true, // if true, fancyBox will be closed when user clicks on the overlay
speedOut : 200, // duration of fadeOut animation
showEarly : true, // indicates if should be opened immediately or wait until the content is ready
css : {}, // custom CSS properties
locked : true // if true, the content will be locked into overlay
},
title : {
type : 'float' // 'float', 'inside', 'outside' or 'over'
}
}
live  Значение этого параметра понять не получилось. Если кто вдруг знает напишите пожалуйста в комментариях буду очень благодарен.
parent  Значение этого параметра понять не получилось. Если кто вдруг знает напишите пожалуйста в комментариях буду очень благодарен.

Свою благодарность автору статьи вы можете выразить просто кликнув в нужном месте на странице 🙂

автор: Руслан Овчинников
Оценка: 1Оценка: 2Оценка: 3Оценка: 4Оценка: 5 (6 оценок, в среднем: 4,17 из 5)
Загрузка...