На многих сайта установлены увеличилки картинок. При нажатии на миниатюру, оригинальное изображение открывается с затемнением экрана в этом же окне. Но плагин fancybox 3 позволяет организовать не только это, но и модальные окна с открытием любого контента (где вы можете вставить свой контент, произвольный сайт, PDF файл или видео с YouTube)!
Fancybox 3 устанавливается очень просто - достаточно подключить всего 2 файла (которые вы найдете в скачанном архиве): jquery.fancybox.js и jquery.fancybox.css.
Увеличика картинок
<a href="оригинальная_картинка" data-fancybox data-caption="Заголовок"><img src="миниатюра_картинки" /></a>
Чтобы любая картинка увеличивалась на вашем сайте, добавьте к ней ссылку, в 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 будет означать, что эти картинки связаны. При нажатии на любую из них во всплывайке появятся стрелки, возможность слайдшоу миниатюры и т.п.
<a href="оригинальная_картинка" data-fancybox="example_group"><img src="миниатюра_картинки" /></a>
<a href="оригинальная_картинка" data-fancybox="example_group"><img src="миниатюра_картинки"/></a>
Произвольный текст во всплывайке
Очень легко можно создать неограниченное количество всплываек, для этого будем использовать 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 был с прокруткой, его нужно инициализировать и добавить параметр прокрутки (для предыдущего примера - теперь сайты будут с прокруткой):
<script type="text/javascript">
$(document).ready(function() {
$(".myframe").fancybox({ iframe : { scrolling : 'yes', }, });
});
</script>
Разные форматы 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 закончен. Вы можете прочитать о дополнительных возможностях плагина.
