Увеличилка картинок и модальные окна на fancybox 3 jQuery

На многих сайта установлены увеличилки картинок. При нажатии на миниатюру, оригинальное изображение открывается с затемнением экрана в этом же окне. Но плагин fancybox 3 позволяет организовать не только это, но и модальные окна с открытием любого контента (где вы можете вставить свой контент, произвольный сайт, PDF файл или видео с YouTube)!

Fancybox 3 устанавливается очень просто – достаточно подключить всего 2 файла (которые вы найдете в скачанном архиве): jquery.fancybox.js и jquery.fancybox.css.

Увеличика картинок

Чтобы любая картинка увеличивалась на вашем сайте, добавьте к ней ссылку, в href которой будет ссылка на оригинал. Но никто вам не запрещает использовать оригинал в ссылке и самой картинке.

data-fancybox – означает, что к этой ссылке будет применен плагин fancybox
data-caption – заголовок картинки во всплывайке (вместо него можно использовать title=”” на ссылке)

Если вам нужно, чтобы fancybox запускался по идентификатору, то уберите в ссылке data-fancybox и инициализируйте плагин по вашему идентификатору:

<a href=”оригинальная_картинка” class=”mysuperimg” data-caption=”Заголовок”><img src=”миниатюра_картинки” /></a>
<script type=”text/javascript”>
$(document).ready(function() {
$(“.mysuperimg”).fancybox({ }); });
</script>

Галерея на Fancybox 3

Все тоже самое, как и с увеличилкой, только вам нужно будет добавить к каждой ссылке одинаковый атрибут: data-fancybox=”example_group”, где example_group будет означать, что эти картинки связаны. При нажатии на любую из них во всплывайке появятся стрелки, возможность слайдшоу миниатюры и т.п.

Произвольный текст во всплывайке

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

<a data-fancybox data-src=”#hidden-content” href=”javascript:;”>Показать текст</a>
<div style=”display: none;” id=”hidden-content”><h2>Привет!</h2><p>Это произвольный текст!</p></div>

В этом примере мы изначально скрыли блок #hidden-content, а при нажатии на ссылку грузим его во всплывайку.

Iframe загрузка любой страницы

Fancybox 3 позволяет грузить любой сайт (если у него нет от этого защиты) в модальное окно! Более того если вы грузите свой собственный сайт, то немного пошаманив можно загружать только определенную его часть, например, какой-нибудь опрос или корзину товаров.

<a data-fancybox data-src=”http://сайт.ру/” href=”javascript:;”>Сайт в Iframe окне</a>

Кстати заметил интересную особенность, если у вас много сайтов, которые должны открываться в виде галереи, то ничего вам не мешает использовать группировку с помощью data-fancybox=”example_sait”.(в модальном окне сайты буду листаться друг за другом) Пример:

<a class=”myframe” data-fancybox=”example_sait” data-src=”http://сайт1.ру/” href=”javascript:;”>Сайт1 в Iframe окне</a>
<a class=”myframe” data-fancybox=”example_sait” data-src=”http://сайт2.ру/” href=”javascript:;”>Сайт2 в Iframe окне</a>

Чтобы Iframe был с прокруткой, его нужно инициализировать и добавить параметр прокрутки (для предыдущего примера – теперь сайты будут с прокруткой):

Разные форматы YouTube, PDF, карты (запускается на http)

<a data-fancybox data-src=”http://www.adobe.com/content/dam/Adobe/en/devnet/acrobat/pdfs/pdf_open_parameters.pdf” href=”javascript:;”>PDF файл</a>
<a data-fancybox href=”https://www.youtube.com/watch?v=_sI_Ps7JSEk”>YouTube видео</a>
<a data-fancybox href=”https://www.youtube.com/watch?v=_sI_Ps7JSEk&autoplay=1&rel=0&controls=0&showinfo=0″>YouTube видео с параметрами</a>
<a data-fancybox href=”https://vimeo.com/191947042″>Vimeo видео</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 карта</a>

На этом основной функционал Fancybox 3 закончен. Вы можете прочитать о дополнительных возможностях плагина.