Галерея

Для отображения модальных окон в SIMAI Framework используется fancyBox 3, который предоставляет широкие возможности по отображению адаптивного контента в всплывающем окне.

Как использовать

Существует несколько способов использования fancyBox.

Инициализация с дата атрибутами

Основной способ использования fancyBox это добавление атрибута data-fancybox к ссылке. Заголовок добавляется используя атрибут data-caption. Например:

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

Если у вас есть несколько объектов, вы можете атрибут data-fancybox к каждому элементу для создания группы элементов. Кажда группа должна иметь свое уникальное название:

<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>

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

Инициализация с помощью JavaScript

Для вызова fancyBox с помощью селектора jQuery, используйте следующий метод:

<script type="text/javascript">
	$("[data-fancybox]").fancybox({
		// Место для параметров 
	});
</script>

Ручной вызов fancyBox

fancyBox может быть активирован в любое время с помощью Javascript и следовательно нет необходимости в специальном тригере элемента. Например, для показа простого сообщения:

$.fancybox.open('<div class="message"><h2>Hello!</h2><p>You are awesome!</p></div>');

Для получения подробной информации смотри раздел API.

Типы данных

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

Изображения

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

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

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

• data-width - реальная ширина изображения
• data-height - реальная высота изображения

<a href="image.jpg" data-fancybox="images" data-width="2048" data-height="1365">
    <img src="thumbnail.jpg" />
</a>

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

<a href="medium.jpg" data-fancybox="images" data-srcset="large.jpg 1600w, medium.jpg 1200w, small.jpg 640w">
	<img src="thumbnail.jpg" />
</a>

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

$('[data-fancybox]').fancybox({
	image : {
		protect: true
	}
});

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

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

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

<div style="display: none;" id="hidden-content">
	<h2>Hello</h2>
	<p>You are awesome.</p>
</div>

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

<a data-fancybox data-src="#hidden-content" href="javascript:;">
	Hidden div
</a>

Ajax

Чтобы загрузить контент через ajax, вам необходимо добавить атрибут data-type = "ajax" к вашей ссылке:

<a data-fancybox data-type="ajax" data-src="my_page.com/путь/до/ajax/" href="javascript:;">
Контент ajax
</a>

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

<div class="sf-code"><pre> <code class="language-html" data-lang="html">
 <a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" href="javascript:"><br/>AJAX content <br/></a>
</code></pre></div>
	

Iframe

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

<a data-fancybox data-src="http://codepen.io/fancyapps/full/jyEGGG/" href="javascript:;">
	Веб-страница
</a>

<a data-fancybox data-src="http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf" href="javascript:;">
PDF файл
</a>

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

.fancybox-slide--iframe .fancybox-content {
	width  : 800px;
	height : 600px;
	max-width  : 80%;
	max-height : 80%;
	margin: 0;
}

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

$("[data-fancybox]").fancybox({
	iframe : {
		css : {
			width : '600px'
		}
	}
});

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

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

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

<a data-fancyb<a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk">
  YouTube video
</a>

<a data-fancybox href="https://vimeo.com/191947042">
  Vimeo video
</a>

<a data-fancybox href="https://www.google.com/maps/place/Googleplex/@37.4220041,-122.0833494,17z/data=!4m5!3m4!1s0x0:0x6c296c66619367e0!8m2!3d37.4219998!4d-122.0840572">
	Google Map
</a>

<a data-fancybox href="https://www.instagram.com/p/BNXYW8-goPI/?taken-by=jamesrelfdyer" data-caption="<span title="Edited">balloon rides at dawn ✨🎈<br>was such a magical experience floating over napa valley as the golden light hit the hills.<br><a href="https://www.instagram.com/jamesrelfdyer/">@jamesrelfdyer</a></span>">
	Instagram photo
</a>

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

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

<a data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk&autoplay=1&rel=0&controls=0&showinfo=0">
  YouTube video - скрытие панели управления и информации
</a>

<a data-fancybox href="https://vimeo.com/191947042?color=f00">
  Vimeo video - измененный цвет
</a>

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

$('[data-fancybox]').fancybox({
	youtube : {
		controls : 0,
		showinfo : 0
	},
	vimeo : {
		color : 'f00'
	}
});

Галерея

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

fancyBox поддерживает srcset с дескриптором w во всех браузерах. Это позволяет обслуживать различные масштабируемые изображения в зависимости от ширины экрана. Это означает, что мобильные пользователи теперь могут получать файлы меньшего размера, что, в свою очередь, ускоряет доставку контента. Кроме того, со временем это может сэкономить довольно много трафика, что, в свою очередь, может сэкономить деньги.

Автоматическое определение

• Видео с YouTube
• Видео с Vimeo
• Карты Google
• Фото Instagram

HTML

• Встроенное содержимое
• Запрос Ajax
• Запрос Ajax 2
• Страница с Iframe

Поддерживаемые сайты могут использовать fancyBox. Вы можете совмещать изображения, видео и HTML контент в любой галерее.