Краткая справка по fancybox 3. Галерея, модальные окна, видео к «окошке»

Недавно работал над проектом, где нужно было сделать несколько галерей, которые формировались динамически из записей wordpress’а. Об этом я даже написал статью. Как seo-шник я, конечно же, слежу за тем откуда ко мне на сайт заходят люди. Я увидел, что людям интересно узнать подробности по использованию fancybox 3-й версии. В ней есть свои хорошие, но не интуитивно понятные особенности. Сейчас я вам расскажу об этом.

Установка

Нам нужно подключить jQuery v3.x и файлы фансибокса.

Использование

Fancybox 3 позволяет вам очень гибко его использовать, есть несколько ключевых возможностей:

• Создать галерею картинок
• Создать всплывающие окно с видео
• Создать модальное окно с разным поведением
• Загружать данные для галереи по ajax (например загрузить форму)

Итак, начнём смотреть всё по порядку.

Галерея

Галереей пользоваться просто. Оборачиваете вашу картинку ссылкой с атрибутами и все ваши картинки будут листаться. Пример

<a href="image_1.jpg" data-fancybox="gallery" data-caption="Caption #1">
    <img src="thumbnail_1.jpg" alt="" />
</a>

Данный пример вы так же можете посмотреть на codepen fancybox’а. Смотреть демо. Далее я тоже буду давать ссылки на примеры.

Несколько галерей

Во второй версии fancybox, чтобы создать несколько галерей, нужно было дописать атрибут rel или data-group. В третьей версии это изменилось и разработчики ушли от этого. Теперь разные галереи нужно инициализировать JS-сом. Вот так:

$().fancybox({
    selector : '.galeryOne'
});
$().fancybox({
    selector : '.galeryTwo'
});

Смотреть демо

Хоть удобный (как я считаю) способ инициализации через html-атрибуты разработчики убрали, они в данном функционале сделали так, что в этом случае в галерее появятся и те картинки, которые создадутся динамически.

Видео

Наверное это очень просто. Вы можете просто указать в ссылке атрибут data-fancybox иhref c адресом видео на youtube или vimeo, а также на файле mp4 и он сам его будет «правильно» загружать. Так же в окне вы можете задавать ширину или высоту с помощью атрибутов data-width и data-height или соотношение сторон видео атрибутом data-ratio.

Смотреть демо.

Модальные окна

Чтобы создать модальное окно вам нужно следующее:

• Создать html c содержанием, и дать ему id
• Скрыть его с помощью style=»display:none;»
• У ссылки, открывающей окно, прописать атрибуты data-fancybox, data-src=»id блока« иhref=»javascript:;»

Вуаля! В итоге у вас получится что-то типа этого

<a data-fancybox data-src="#modal" href="javascript:;">Open demo</a>
 <div style="display: none;" id="modal">
  <h2>Hello!</h2>
  <p>You are awesome!</p>
</div>

Если вам нужно в модальное окно вставить кнопку «закрыть», то создайте button с атрибутом data-fancybox-close.

Смотреть демо

В демо, кстати, есть несколько примеров анимации окон.

AJAX

Суть использования AJAX в fancybox состоит в том, что фанси во всплывающее окно загружает данные по ссылке. И тут наверное сложнее сделать так, чтобы на той странице было то что нужно. Тут, как всегда, всё очень просто.

<a data-fancybox data-type="ajax" data-src="my_page.com/path/to/ajax/" data-filter="#two" href="javascript:;">
    AJAX content
</a>

Главное отличае от всех остальных случаев в том, что нужно добавить атрибут data-type=»ajax» и data-src=»ссылка на данные«. Еще вы можете выбирать, что показать из данных на загруженной странице, если контент обёрнут блоком с id или другим селектором. Тогда вы добавляете в ссылку data-filter=»селектор блока«.

Смотреть демо

P.S.

В прошлом моём опыте я в первый раз так плотно столкнуля с библиотекой fancybox 3. До этого я пользовался другими библиотеками. Почему я не писал о них?! Мне всегда казалось, что они не завершённые и с ними приходилось идти на компромиссы в случае с JS или их UI. В fancy же, как мне кажется, есть всё что нужно и его элементы отлично выглядят, он отлично работает на мобильных. Думаю, что я воспользуюсь им еще не раз и поделюсь своим опытом с вами. Я расскажу про его API и о случаях в которых можно его использовать, а главное как. Всего хорошего!