05.03.2017

Долгожданный Fancybox 3. Библиотека всплывающего окна, которую ждали

Screenshot at марта 05 20-22-57

Краткая предыстория: всплывающие окна (или просто всплывайки) всегда были самой непривлекательной частью сайта.

Перебрав немало библиотек «всплываек», мы обнаружили у всех один существенный минус: если на десктопах все выглядело более-менее прилично, то на мобильных устройствах окна или скроллились вместе со страницей, или (что было еще ужаснее) – при свайпе вверх выводили сайдбар мобильного браузера.

Чего только ни пробовали:  ставили подряд все, что только могли найти – тестировались Fancybox, uikit, BootstrapLightbox, и т.д., и т.п. Худо-бедно срабатывал вариант вывода «всплываек» на весь экран с подключением кастомных скроллеров (например, iScroll).

Выбор пал на Fancybox – у него, в отличие от других кандидатов, все же был API, были коллбэки и довольно большой набор настроек. Оставалось только надеяться, что проблема отображения на мобильных устройствах со временем будет решена.

Этот день настал 3 марта 2017. Вышел долгожданный Fancybox 3. Что же в нем нового?

Во-первых, наконец-то решена проблема постоянно появляющегося мобильного сайдбара. Об этом наконец-то можно забыть и двигаться дальше.

Второе – библиотека теперь шагает под флагом «Mobilefirst». Ушли в прошлое давно устаревшие стрелки.

Р®б1

Слайды теперь можно полноценно «таскать», причем не только в мобильных устройствах.

Р®б2

Третье: появилась возможность вывести/скрыть превью галереи, включить/отключить полноэкранный режим.

Р®б3

Четвертое: добавлено автоопределение для многих сторонних ресурсов. Видео Youtube и Vimeo, карты Google и еще несколько ресурсов теперь срабатывают простым добавлением кода:

<a href="https://www.youtube.com/watch?v=_sI_Ps7JSEk" data-fancybox="">YouTube video</a>
<a href="https://vimeo.com/191947042" data-fancybox="">Vimeo video</a>
<a href="https://www.google.com/maps/place/Googleplex/@37.4220041,-122.0833494,17z/data=!4m5!3m4!1s0x0:0x6c296c66619367e0!8m2!3d37.4219998!4d-122.0840572" data-fancybox="">Google Map</a>

Приятные дополнения: наш любимый flex! Плюс на десерт разработчики добавили возможность сделать ваши «всплывайки» полноценными диалоговыми окнами.

Р®б4

А также возможность открывать их на весь экран без танцев с бубном.

Р®б5

Спасибо за прочтение!

Лучшие материалы