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