450076, г. Уфа, ул. Чернышевского 82
+7 (347) 246-8500 demo@simai.ru

Компоненты

Галерея

Для отображения модальных окон в 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({
// Options will go here
});
</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< - реальная высота изображения/li>
<a href="image.jpg" data-fancybox="images" data-width="2048" data-height="1365">
<img src="thumbnail.jpg" />
</a>

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

<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 контейнер в теле страницы:

Open demo
<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/path/to/ajax/" href="javascript:;">
AJAX content
</a>

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

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

Iframe

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

<a data-fancybox data-src="http://codepen.io/fancyapps/full/jyEGGG/" href="javascript:;">
Webpage
</a>

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

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

// Регулирование высоты iframe по содержимому
parent.jQuery.fancybox.getInstance().update();

// Закрыть текущий экземпляр fancyBox
parent.jQuery.fancybox.getInstance().close();

Размеры 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>

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

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

Image gallery

By default, fancyBox fully preloads an image before displaying it. You can choose to display the image right away. It will render and show the full size image while the data is being received.

fancyBox supports srcset with the w descriptor across all browsers. This allows to serve different scaled images based on viewport width. What this means is that mobile users can now be served smaller file sizes, which in turn speeds up the delivery of the content. Also over time this can save quite a bit of bandwidth, which in turn can save you money.

HTML

Supported sites can be used with fancyBox by just providing the page URL. You can mix images, videos and any HTML content in each gallery.