Галерея

Для отображения модальных окон в 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>

Определение типа контента

fancyBox поддерживает автоматическое определение типа контента на основе его адреса. Если тип контента не может быть определен автоматически, вам необходимо вручную установить data-type атрибут:

<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 во всех браузерах. Это позволяет обслуживать различные масштабируемые изображения в зависимости от ширины экрана. Это означает, что мобильные пользователи теперь могут получать файлы меньшего размера, что, в свою очередь, ускоряет доставку контента. Кроме того, со временем это может сэкономить довольно много трафика, что, в свою очередь, может сэкономить деньги.

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

HTML

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