Краткая справка по fancybox 3. Галерея, модальные окна, видео к «окошке»
Недавно работал над проектом в котором нужно было сделать несколько галерей, которые формировались динамически из записей wordpress’а. Об этом я даже написал статью. Как seo-шник я, конечно же слежу за тем откуда ко мне на сайт заходят люди. Я увидел, что людям интересно узнать подробности по использованию fancybox 3-й версии. В ней есть свои хорошие, но не интуетивно-понятные особенности. Сейчас я вам расскажу об этом.
Установка
Нам нужно подключить jQuery v3.x и файлы фансибокса.
Использование
Fancybox 3 позволяет вам его очень гибко использовать, есть несколько ключевых возможностей:
- Создать галлерею картинок
- Создать всплывающие окно с видео
- Создать модальное окно с разным поведением
- Загружать данные для галлереии по ajax (например загрузить форму)
И так, начнём смотреть всё по порядку.
Галерея
Галерей пользоваться просто. Оборачиваете вашу каркинку ссылкой с атрибутами и все ваши картинки будут листаться. Пример
|
1 2 3 |
<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-сом. Вот так:
|
1 2 3 4 5 6 |
$().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:;»
Вуаля! В итоге у вас получиться что-то типа этого
|
1 2 3 4 5 |
<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 состоит в том, что фанси во всплывающее окно загружает данные по ссылке. И тут наверное, сложнее сделать так, чтобы на той странице было то, что нужно. Тут, как всегда, всё очень просто.
|
1 2 3 |
<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 и о случаех в которых можно его использовать, а главное как. Всего хорошего