когда нечего делать, а творческая душа требует реализации и хочется что-то сделать или написать, то я пишу сюда или делаю что-то на этом сайте. Кому интересна web-разработка, wordpress и то что рядом с этим, то заходите на мой сайт и читайте всякое...
Краткая справка по 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.
В демо, кстати, есть несколько примеров анимации окон.
AJAX
Суть использования AJAX в fancybox состоит в том, что фанси во всплывающее окно загружает данные по ссылке. И тут наверное, сложнее сделать так, чтобы на той странице было то, что нужно. Тут, как всегда, всё очень просто.
Главное отличае от всех остальных случаев это то что нужно добавить атрибут data-type=»ajax» и data-src=»ссылка на данные«. Еще вы можете выбитать, что показать из данных на загруженой странице, если контент обёрнут блоком с id или другим селекотором. Тогда вы добавляете в ссылку data-filter=»селектор блока«.
В прошлом моём опыте я в первый раз так плотно столкнуля с библиотекой fancybox 3. До этого я пользовался другими библиотеками. Почему я не писал о них?! Мне всегда казалось, что они не завершённые и с ними приходилось идти на компромисы в случаех с JS или их UI. В fancy же, как мне кажется, есть всё, что нужно и его элементы отлично выглядят, он отлично работает на мобильных. Думаю, что я воспользуюсь им еще не раз и поделюсь своим опытом с вами. Думаю я расскажу про его API и о случаех в которых можно его использовать, а главное как. Всего хорошего
Поддержи Xakplant
Я давно хочу развить видеоверсию, но пока этого не получается из-за нехватки ресурсов. Сейчас я собираю деньги на новый компьютер и микрофон. Поддержи xaklant и ты увидишь полезные видео быстрее.