Fancybox for wordpress

Содержание:

How to Use
- Initialize with data attributes
- Manual calling of fancyBox
FAQ
How to Use
- Initialize with data attributes
- Manual calling of fancyBox
Что нового в Fancybox 2?
Типы данных
- Изображения
- Вложенный контент
Hello!
- Ajax
- Iframe
Внедренные объекты
Параметры видео
5. Тема оформления
Easy FancyBox: основные особенности плагина
Вызов плагина
Advanced
Setup
- - Important
- Download fancyBox
Setup
- Downloading using Bower
Воспроизведение видео
- Пример разметки видео с YouTube и Vimeo с постером
- Настройки для видео
FAQ
Advanced
How to use
Options

How to Use

There are a few ways you can use fancyBox.

Initialize with data attributes

The most basic way to use fancyBox is by adding the attribute to a link.
A caption can be added using the attribute. Example:

<a href="image.jpg" data-fancybox data-caption="My caption">
	<img src="thumbnail.jpg" alt="" />
</a>

If you have a group of items, you can use the same attribute value for each of them to create a gallery.
Each group should have a unique value:

<a href="image_1.jpg" data-fancybox="group" data-caption="Caption #1">
	<img src="thumbnail_1.jpg" alt="" />
</a>

<a href="image_2.jpg" data-fancybox="group" data-caption="Caption #2">
	<img src="thumbnail_2.jpg" alt="" />
</a>

Tip:

fancyBox attempts to automatically detect the type of content based on the given url.

If it cannot be detected, the type can also be set manually using attribute:

<a href="images.php?id=123" data-type="image" data-caption="Caption">
	Show image
</a>

Manual calling of fancyBox

fancyBox can be activated at any point within Javascript and therefore does not necessarily need a trigger element.

Example of displaying a simple message:

See for more information.

FAQ

Opening/closing causes fixed element to jump

5 лучших плагинов wordpress для защиты от adblock блокировщика рекламы

Simply add CSS class to your fixed positioned elements.
Example of using Bootstrap navbar component:

The script measures width of the scrollbar and creates CSS class
that uses this value for property.
Therefore, if your element has , you should positon it using and properties instead. Example:

How to customize caption

You can use option that accepts a function and is called for each group element. Example of appending image download link:

Inside method, refers to the clicked element. Example of using different source for caption:

How to reposition thumbnail grid

There is currenty no JS option to change thumbnail grid position.
But fancyBox is designed so that you can use CSS to change position or dimension for each block
(e.g., content area, caption or thumbnail grid).
This gives you freedom to completely change the look and feel of the modal window, if needed.
View demo on CodePen

How to Use

Как сделать кнопки социальных сетей для сайта на wordpress

There are a few ways you can use fancyBox.

Initialize with data attributes

The most basic way to use fancyBox is by adding the attribute to a link.
A caption can be added using the attribute. Example:

<a href="image.jpg" data-fancybox data-caption="My caption">
	<img src="thumbnail.jpg" alt="" />
</a>

If you have a group of items, you can use the same attribute value for each of them to create a gallery.
Each group should have a unique value:

<a href="image_1.jpg" data-fancybox="group" data-caption="Caption #1">
	<img src="thumbnail_1.jpg" alt="" />
</a>

<a href="image_2.jpg" data-fancybox="group" data-caption="Caption #2">
	<img src="thumbnail_2.jpg" alt="" />
</a>

Tip:

fancyBox attempts to automatically detect the type of content based on the given url.

If it cannot be detected, the type can also be set manually using attribute:

<a href="images.php?id=123" data-type="image" data-caption="Caption">
	Show image
</a>

Manual calling of fancyBox

fancyBox can be activated at any point within Javascript and therefore does not necessarily need a trigger element.

Example of displaying a simple message:

See for more information.

Что нового в Fancybox 2?

Как подключить css файл к wordpress

И так что нового было добавлено в этот релиз за последнее время:

Расширен набор вспомогательных функций;
Отзывчивость (всплывающие окошки теперь масштабируются в зависимости от размера окна браузера);
Добавлено слайдшоу;
Новые эффекты переходов между изображениями в галерее;
Fancybox полностью переведен на CSS3 (тени, скругление углов и прочее);
Обновлен плагин настроек (не имеет обратной совместимости);
Теперь выпускается под лицензией Creative Commons Attribution-NonCommercial 3.0, ознакомится с которой можно по этой ссылке: http://creativecommons.org/licenses/by-nc/3.0/

Типы данных

С помощью fancyBox вы можете отобразить различные типы данных.

Изображения

Стандартный способ использования fancyBox заключается в том, что используются несколько уменьшенных изображений, которые ссылаются на более крупные изображения:

По умолчанию FancyBox полностью загружает изображение перед его отображением. Вы можете сразу же отобразить изображение. Он будет отображать и показывать полноразмерные изображения во время приема данных. Для этого необходимы некоторые атрибуты:

— реальная ширина изображения

С помощью атрибута вы моежте отображать изображения различного размера для устройств с разным разрешением. Это можно использовать для ускорения времени загрузки изображений для мобильных устройствразные изображения для разных устрой FancyBox поддерживает атрибут data-srcset «scrset», который позволяет отображать поэтому я могу отображать разные изображения в зависимости от ширины видового экрана. Вы можете использовать. Пример:

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

Совместно с защитой от копирования, вы дополнительно поверх основного изображения можете отображать водяной знак. Пример:

Вложенный контент

Для отображения вложенного HTML контента, необходимо разместить DIV контейнер в теле страницы:

Open demo

Hello!

You are awesome!

Для отображения скрытого слоя добавляем ссылку используя атрибут содержащий CSS идентификатор элемента сожержащий контент который вы хотите открыть:

Ajax

Чтобы загрузить контент через AJAX, вам необходимо добавить атрибут к вашей ссылке:

Вы можете дополнительно указать селектор в атрибуте для показа только части контента обозначенного данным селектором:

Использование атрибута
Использование значения селектора

Подключаемый контент

Iframe

Вы можете отображать контент другой страницы во включаемой области iframe:

External page

Sample PDF file

Чтобы получить доступ и управлять fancyBox в родительском окне изнутри iframe:

Размеры iframe можно контролировать с помощью CSS:

Эти правила CSS могут быть переопределены с помощью JS, если необходимо:

Если вы не отключили предварительную загрузку iframe (с использованием параметра «предварительная загрузка»), тогда скрипт попытается вычислить размеры содержимого и отрегулирует ширину / высоту iframe, чтобы он соответствовал содержанию в нем.

Внедренные объекты

Поддерживаемые сайты можно использовать с fancyBox, просто указав URL-адрес страницы:

YouTube video
Vimeo video
Google Map
Instagram photo

Параметры видео

Управление параметрами видео через URL:

YouTube video — скрытие панели управления и информации
Vimeo video — измененный цвет

Управление параметрами видео через avaScript::

YouTube video — скрытие панели управления и информации
Vimeo video — измененный цвет

5. Тема оформления

Вместо родного стиля fancybox подключаем стиль jquery.fancybox.atuin.css и инициализирум:

$(»).fancybox({
/* Стрелки влево и вправо */
btnTpl: {
arrowLeft:
‘<button data-fancybox-prev class=»fancybox-button fancybox-button—arrow_left» title=»`PREV`»>’ +
‘<svg viewBox=»0 0 154 109″><symbol id=»Arrow» viewBox=»-73.9 -55.3 135.9 85.4″><g><polygon points=»-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 «/></g><g><polygon points=»-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 «/></g></symbol><use xlink:href=»#Arrow» width=»135.9″ height=»85.4″ id=»XMLID_1_» x=»-73.9″ y=»-55.3″ transform=»matrix(1.007 0 0 -1.007 83.0005 42)» /></svg>’ +
«</button>»,
arrowRight:
‘<button data-fancybox-next class=»fancybox-button fancybox-button—arrow_right» title=»`NEXT`»>’ +
‘<svg viewBox=»0 0 154 109″><symbol id=»Arrow» viewBox=»-73.9 -55.3 135.9 85.4″><g><polygon points=»-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 «/></g><g><polygon points=»-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 «/></g></symbol><use xlink:href=»#Arrow» width=»135.9″ height=»85.4″ id=»XMLID_1_» x=»-73.9″ y=»-55.3″ transform=»matrix(1.007 0 0 -1.007 83.0005 42)» /></svg>’ +
«</button>»
},
/* Руссификация */
lang: «ru»,
i18n: {
ru: {
CLOSE: «Закрыть»,
NEXT: «Следующий»,
PREV: «Предыдущий»,
ERROR: «Контент не может быть загружен. <br/> Попробуйте позже.»,
PLAY_START: «Начать слайдшоу»,
PLAY_STOP: «Остановить слайдшоу»,
FULL_SCREEN: «Полный экран»,
THUMBS: «Эскизы»,
DOWNLOAD: «Скачать»,
SHARE: «Поделиться»,
ZOOM: «Увеличить»
}
}
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

$(»).fancybox({

/* Стрелки влево и вправо */

btnTpl{

arrowLeft

‘<button data-fancybox-prev class=»fancybox-button fancybox-button—arrow_left» title=»`PREV`»>’+

‘<svg viewBox=»0 0 154 109″><symbol id=»Arrow» viewBox=»-73.9 -55.3 135.9 85.4″><g><polygon points=»-73.9,29.1 -6,-9.2 61.9,30.1 61.9,14.2 -6,-25.1 -73.9,14.2 «/></g><g><polygon points=»-73.9,-1 -6,-39.3 61.9,0 61.9,-16 -6,-55.3 -73.9,-16 «/></g></symbol><use xlink:href=»#Arrow» width=»135.9″ height=»85.4″ id=»XMLID_1_» x=»-73.9″ y=»-55.3″ transform=»matrix(1.007 0 0 -1.007 83.0005 42)» /></svg>’+

«</button>»,

arrowRight

‘<button data-fancybox-next class=»fancybox-button fancybox-button—arrow_right» title=»`NEXT`»>’+

«</button>»

/* Руссификация */

lang»ru»,

i18n{

ru{

CLOSE»Закрыть»,

NEXT»Следующий»,

PREV»Предыдущий»,

ERROR»Контент не может быть загружен. <br/> Попробуйте позже.»,

PLAY_START»Начать слайдшоу»,

PLAY_STOP»Остановить слайдшоу»,

FULL_SCREEN»Полный экран»,

THUMBS»Эскизы»,

DOWNLOAD»Скачать»,

SHARE»Поделиться»,

ZOOM»Увеличить»

}

});

Easy FancyBox: основные особенности плагина

Как и предыдущий плагин, Easy FancyBox для WordPress начинает работать сразу после стандартной установки на CMS по отношению ко всем изображениям. Если вы захотите настроить параметры «под себя», то на странице по адресу в консоли «Настройки» — «Медиафайлы» обнаружите опции, практически идентичные опциям FancyBox для Вордпресс.

Характерными же его отличиями являются:

плагин частично русифицирован, поэтому разобраться в его настройках самостоятельно не составит большого труда;
при базовых установках картинки автоматически не объединяются в галереи, Easy FancyBox выводит во всплывающем окне только то изображение, по которому кликнули. Чтобы отобразить группу файлов в лайтбоксе, необходимо создать стандартную галерею Вордпресс в режиме редактирования записи.

Или же в настройках плагина в блоке «Gallery» в поле «Autogallery» выбрать пункт «Все в одной галерее»;

в варианте «из коробки» Easy FancyBox размещает поверх изображений название, взятое из атрибута alt. Чтобы отключить эту опцию, в блоке «Appearance» снимите галочку возле поля «Показать название»;
плагин позволяет выбрать тип медиафайлов, которые будут открываться в модальном окне.

Каких-либо существенных недостатков в работе плагина не выявлено. Но если в ваш шаблон ВП встроен «родной» лайтбокс, велика вероятность конфликта и может оказаться, что Easy FancyBox для WordPress не работает. В таком случае имеет смысл обратиться в службу поддержки.

Вызов плагина

Теперь вам осталось добавить собственный код после того, как вы подключили скрипт плагина. Если для div-обертки для галереи вы задали атрибут , как в разметке, то вам останется добавить совсем небольшой код:

Вызываем код плагина

JavaScript

1
2
3

lightGallery(document.getElementById(‘lightgallery’));

</script>

Если вы не хотите назначать id для элемента-обертки, задайте ему класс или data-атрибут, а затем используйте метод :

Использование класса или data-атрибута

<div class=»gallery» data-gallery=»gallery1″>
<a href=»img/img1.jpg»>
<img src=»img/thumb1.jpg»>
</a>
<a href=»img/img2.jpg»>
<img src=»img/thumb2.jpg»>
</a>
…
</div>
<script src=»js/lightgallery.min.js»></script>
<script>
//при использовании атрибута class
lightGallery(document.getElementById(‘.gallery’));
//при использовании атрибута data-атрибута
lightGallery(document.getElementById(»));
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<ahref=»img/img1.jpg»>

<a>

<ahref=»img/img2.jpg»>

<a>

…

<div>

//при использовании атрибута class

lightGallery(document.getElementById(‘.gallery’));

//при использовании атрибута data-атрибута

lightGallery(document.getElementById(»));

</script>

Учтите, что возвращает вам первый элемент, найденный на странице или в другом html-элементе, поэтому его нельзя использовать для нескольких галерей.

В том случае, если у вас все же есть несколько галерей на одной странице, вы не можете дать им один , т.к. это противоречит HTML-спецификации, да и метод не подойдет, т.к. имеет смысл все галереи объединить одним классом, на выручку придут методы или , например так:

Вызов плагина для нескольких галерей с одним классом

JavaScript

let allGalleries = document.querySelectorAll(‘.gallery’);
allGalleries.forEach(item => lightGallery(item))

1 2	let allGalleries=document.querySelectorAll(‘.gallery’); allGalleries.forEach(item=>lightGallery(item))

Давайте прямо сейчас посмотрим, что умеет Lightgallery «из коробки» (открыть пример в новой вкладке): показывать и листать изображения, уменьшать их под размер экрана, выводить описания на основе атрибутов для ссылок, предоставлять ссылку на скачивание изображения, показывать счетчик изображений в виде «номер текущего фото/всего фотографий».

Это далеко не все «умения» Lightgallery. Просто остальные его возможности, как правило, зависят от дополнительных js- или css-файлов, которые разработчики разделили по функциональности.

Advanced

Helpers provide a simple mechanism to extend the capabilities of fancyBox. There are two built-in helpers — ‘overlay’ and ‘title’.
You can disable them, set custom options or enable other helpers. Examples:

Also available are event driven callback methods. The keyword refers to the current or upcoming object (depends on callback method). Here is how you can change title:

It`s possible to open fancyBox programmatically in various ways:

There are several methods that allow you to interact with and manipulate fancyBox, example:

There is a simply way to access wrapping elements using JS:

You can override CSS to customize the look. For example, make navigation arrows always visible,
change width and move them outside of area (use this snippet after including fancybox.css):

In that case, you might want to increase space around box:

Setup

You can install fancyBox by linking and to your html file.

Make sure you also load the jQuery library.
Below is a basic HTML template to use as an example:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>My page</title>

	<!-- CSS -->
	<link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
</head>
<body>

	<!-- Your HTML content goes here -->

	<!-- JS -->
	<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
	<script src="jquery.fancybox.min.js"></script>
</body>
</html>

Important

Make sure you add the jQuery library first
If you already have jQuery on your page, you shouldn’t include it second time
Do not include both fancybox.js and fancybox.min.js files
Some functionality (ajax, iframes, etc) will not work when you’re opening local files on your computer,
the code must be running on a web server

Download fancyBox

You can download the latest version of fancyBox on GitHub.

Or just link directly to fancyBox files on cdnjs — https://cdnjs.com/libraries/fancybox.

fancyBox can also be installed via Bower or npm.

Setup

You can install fancyBox by linking and to your html file.

Make sure you also load the jQuery library.
Below is a basic HTML template to use as an example:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>My page</title>

	<!-- CSS -->
	<link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css">
</head>
<body>

	<!-- Your HTML content goes here -->

	<!-- JS -->
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	<script src="jquery.fancybox.min.js"></script>
</body>
</html>

Tips:

Make sure you add the jQuery library first
If you already have jQuery on your page, you shouldn’t include it second time
Do not include both fancybox.js and fancybox.min.js files

Downloading using Bower

You can install the latest version of fancyBox with the command:

This will install fancyBox to Bower’s install directory, the default being .
Within you will find an uncompressed release and a compressed release.

Воспроизведение видео

Плагин Lightgallery позволяет воспроизводить видео с популярных видео-ресурсов, таких, как YouTube, Vimeo, VK, а также различные типы видеоформатов, доступные в HTML5: MP4, WebM, Ogg и т. д.

Чтобы отобразить видео YouTube, Vimeo или VK, вы можете вставить URL-адрес видео или поделиться URL-адресом, который предоставляется YouTube / vimeo в атрибуте data-src. Разметка в остальном такая же, как и для галереи изображений. Lightgallery проверит атрибут data-src и, если это URL-адрес видео YouTube или Vimeo, создаст видео-слайд.

Вы даже можете предоставить изображение постера для каждого видео. Вместо видео будут загружены изображения постеров. Пользователь сможет переходить к другим слайдам с помощью перетаскивания мышью или смахивания. Постеры повышают производительность и сохраняют гибкость вашей галереи, не влияя на взаимодействие с пользователем. Видео будут загружаться, когда пользователь нажимает на изображение-постер. Вы можете поместить URL-адрес изображения постера в атрибут data-poster.

Кроме того, Lightgallery позволяет автоматически загружать миниатюры изображений с YouTube, Vimeo или VK. Вы можете указать размер миниатюр в настройках. Видео будет автоматически приостановлено, когда пользователь начнет переходить к другому слайду.

Пример разметки видео с YouTube и Vimeo с постером

Добавление ссылок на видео в разметку

1
2
3
4
5
6
7
8
9

<a>

<ahref=»https://vimeo.com/1084537″data-poster=»video-poster2.jpg»>

<a>

…

<div>

Внимание! Для корректного воспроизведения видео Lightgallery требует, чтобы в ваш документ был включен плагин для видео, доступный на GitHub. Подключение видео-плагина

Подключение видео-плагина

1
2
3
4
5

lightGallery(document.getElementById(‘video-gallery’));

</script>

Настройки для видео

При добавлении Lightgallery для видео вы можете указать такие настройки:

Настройки для видеосервисов

lightGallery(document.getElementById(‘video-player-param’), {
youtubePlayerParams: {
modestbranding: 1,
showinfo: 0,
rel: 0,
controls: 0
},
vimeoPlayerParams: {
byline : 0,
portrait : 0,
color : ‘A90707’
}
});

1
2
3
4
5
6
7
8
9
10
11
12
13

lightGallery(document.getElementById(‘video-player-param’),{

youtubePlayerParams{

modestbranding1,

showinfo,

rel,

controls

vimeoPlayerParams{

byline,

portrait,

color’A90707′

}

});

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

Добавление миниатюр для видео

JavaScript

lightGallery(document.getElementById(‘video-thumbnails’), {
loadYoutubeThumbnail: true,
youtubeThumbSize: ‘default’,
loadVimeoThumbnail: true,
vimeoThumbSize: ‘thumbnail_medium’,
});

1
2
3
4
5
6

lightGallery(document.getElementById(‘video-thumbnails’),{

loadYoutubeThumbnailtrue,

youtubeThumbSize’default’,

loadVimeoThumbnailtrue,

vimeoThumbSize’thumbnail_medium’,

});

Всю документацию по плагину вы найдете на англоязычном сайте.

FAQ

Opening/closing causes fixed element to jump

Simply add CSS class to your fixed positioned elements.
Example of using Bootstrap navbar component:

The script measures width of the scrollbar and creates CSS class
that uses this value for property.
Therefore, if your element has , you should positon it using and properties instead. Example:

How to customize caption

You can use option that accepts a function and is called for each group element. Example of appending image download link:

Inside method, refers to the clicked element. Example of using different source for caption:

How to reposition thumbnail grid

Advanced

$(".fancybox").fancybox({    helpers{        titlenull}});$(".fancybox").fancybox({    helpers{        overlay null}});$(".fancybox").fancybox({    helpers{        title {            type 'inside'},        overlay {            css {'background''rgba(255,255,255,0.5)'}}}});$(".fancybox").fancybox({    helpers{        thumbs {            width50,            height50}}});

Also available are event driven callback methods. The keyword refers to the current or upcoming object (depends on callback method). Here is how you can change title:

$(".fancybox").fancybox({beforeLoadfunction(){this.title='Image '+(this.index+1)+' of '+this.group.length+(this.title?' - '+this.title'');}});

It`s possible to open fancyBox programmatically in various ways:

$.fancybox('<div><h1>Lorem Lipsum</h1><p>Lorem lipsum</p></div>',{    title 'Custom Title'});$.fancybox($("#inline"),{    title 'Custom Title'});$.fancybox({    href'example.jpg',    title 'Custom Title'});$.fancybox({        href'example1.jpg',        title 'Custom Title 1'},{        href'example2.jpg',        title 'Custom Title 2'},{    padding});

There are several methods that allow you to interact with and manipulate fancyBox, example:

$.fancybox.close();

There is a simply way to access wrapping elements using JS:

$.fancybox.wrap$.fancybox.skin$.fancybox.outer$.fancybox.inner

You can override CSS to customize the look. For example, make navigation arrows always visible,
change width and move them outside of area (use this snippet after including fancybox.css):

.fancybox-navspan{visibilityvisible;}.fancybox-nav{width80px;}.fancybox-prev{left-80px;}.fancybox-next{right-80px;}

In that case, you might want to increase space around box:

$(".fancybox").fancybox({    margin 20,60,20,60});

How to use

To get started, download the plugin, unzip it and copy files to your website/application directory.
Load files in the section of your HTML document. Make sure you also add the jQuery library.

Create your links with a if you want a title to be shown, and add a class:

If you have a set of related items that you would like to group,
additionally include a group name in the (or ) attribute:

Initialise the script like this:

May also be passed an optional options object which will extend the default values. Example:

Tip: Automatically group and apply fancyBox to all images:

Script uses the attribute of the matched elements to obtain the location of the content and to figure out content type you want to display.
You can specify type directly by adding classname (fancybox.image, fancybox.iframe, etc) or attribute:

Options

Available options listed below.

defaults = {

	// Animation duration in ms
	speed : 330,

	// Enable infinite gallery navigation
	loop : true,

	// Should zoom animation change opacity, too
	// If opacity is 'auto', then fade-out if image and thumbnail have different aspect ratios
	opacity : 'auto',

	// Space around image, ignored if zoomed-in or viewport smaller than 800px
	margin : ,

	// Horizontal space between slides
	gutter : 30,

	// Should display toolbars
	infobar : true,
	buttons : true,

	// What buttons should appear in the toolbar
	slideShow  : true,
	fullScreen : true,
	thumbs     : true,
	closeBtn   : true,

	// Should apply small close button at top right corner of the content
	// If 'auto' - will be set for content having type 'html', 'inline' or 'ajax'
	smallBtn : 'auto',

	image : {

		// Wait for images to load before displaying
		// Requires predefined image dimensions
		// If 'auto' - will zoom in thumbnail if 'width' and 'height' attributes are found
		preload : "auto",

		// Protect an image from downloading by right-click
		protect : false

	},

	ajax : {

		// Object containing settings for ajax request
		settings : {

			// This helps to indicate that request comes from the modal
			// Feel free to change naming
			data : {
				fancybox : true
			}
		}

	},

	iframe : {

		// Iframe template
		tpl : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen allowtransparency="true" src=""></iframe>',

		// Preload iframe before displaying it
		// This allows to calculate iframe content width and height
		// (note: Due to "Same Origin Policy", you can't get cross domain data).
		preload : true,

		// Scrolling attribute for iframe tag
		scrolling : 'no',

		// Custom CSS styling for iframe wrapping element
		css : {}

	},

	// Custom CSS class for layout
	baseClass : '',

	// Custom CSS class for slide element
	slideClass : '',

	// Base template for layout
	baseTpl	: '<div class="fancybox-container" role="dialog" tabindex="-1">' +
			'<div class="fancybox-bg"></div>' +
			'<div class="fancybox-controls">' +
				'<div class="fancybox-infobar">' +
					'<button data-fancybox-previous class="fancybox-button fancybox-button--left" title="Previous"></button>' +
					'<div class="fancybox-infobar__body">' +
						'<span class="js-fancybox-index"></span>&nbsp;/&nbsp;<span class="js-fancybox-count"></span>' +
					'</div>' +
					'<button data-fancybox-next class="fancybox-button fancybox-button--right" title="Next"></button>' +
				'</div>' +
				'<div class="fancybox-buttons">' +
					'<button data-fancybox-close class="fancybox-button fancybox-button--close" title="Close (Esc)"></button>' +
				'</div>' +
			'</div>' +
			'<div class="fancybox-slider-wrap">' +
				'<div class="fancybox-slider"></div>' +
			'</div>' +
			'<div class="fancybox-caption-wrap"><div class="fancybox-caption"></div></div>' +
		'</div>',

	// Loading indicator template
	spinnerTpl : '<div class="fancybox-loading"></div>',

	// Error message template
	errorTpl : '<div class="fancybox-error"><p>The requested content cannot be loaded. <br /> Please try again later.<p></div>',

	// This will be appended to html content, if "smallBtn" option is not set to false
	closeTpl : '<button data-fancybox-close class="fancybox-close-small"></button>',

	// Container is injected into this element
	parentEl : 'body',

	// Enable gestures (tap, zoom, pan and pinch)
	touch : true,

	// Enable keyboard navigation
	keyboard : true,

	// Try to focus on first focusable element after opening
	focus : true,

	// Close when clicked outside of the content
	closeClickOutside : true,

	// Callbacks; See Documentation/API/Events for description and samples
	beforeLoad	 : $.noop,
	afterLoad    : $.noop,
	beforeMove 	 : $.noop,
	afterMove    : $.noop,
	onComplete	 : $.noop,

	onInit       : $.noop,
	beforeClose	 : $.noop,
	afterClose	 : $.noop,
	onActivate   : $.noop,
	onDeactivate : $.noop
}

Set instance options by passing a valid object to method:

Plugin options / defaults are exposed in namespace so you can easily adjust them globally:

Custom options for each element individually can be set by adding a
attribute to the element.

This attribute should contain the properly formatted JSON object: