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


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

Установка

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

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

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

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

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

Галерея

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

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

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

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

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

Хоть удобный (как я считаю) способ инициализации через 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:;»

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

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

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

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

AJAX

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

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

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

P.S.

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