Автор: Stasyuk Eugene 64 Метки: 28.04.2024

Когда я только осваивал азы разработки, всплывающее окно я делал вручную. Да, да — вместо того, чтобы найти какое-то готовое решение, я занимался этим неблагодарным делом 🤪. Мне казалось, что особо ничего сложного в этом нет. Но, только спустя какое-то время работы над данным вопросом, я начал осознавать, что сделать это не так уж и просто. А уже в процессе использования, когда всплывали всякие неудобные нюансы, меня это и вовсе начинало расстраивать. Самое забавное то, что готовое решение у меня было под рукой и я уже использовал его на том же сайте. И, как оказалось, использовал я его не в полной мере. Мне казалось, что fancybox — это библиотека исключительно для открытия изображений. Каково же было мое удивление, что с помощью нее можно было открывать и видео, и текстовые блоки, и google карту. Вот что бывает, когда ленишься читать документацию 😅.

Собственно, краткий обзор на эту библиотеку я и хотел бы здесь сделать.

Знакомьтесь — Fancybox

Знакомьтесь - Fancybox

Fancybox. Что же это такое и с чем его едят? Сразу спойлер — его не едят 🤡 . Fancybox — это одна из мощнейших библиотек, которая помогает с минимальными усилиями сделать всплывающее окно. Такое обилие встроенных возможностей в других библиотеках я не встречал, во всяком случае. С основными преимуществами плагина можно ознакомиться здесь: https://fancyapps.com/fancybox/#key-features . Лично для себя я выделил:

  • Он имеет большое количество опций, которые помогают настроить попап под любой дизайн.
  • Возможность встраивать разные элементы: изображения, видео, карты, inline content, iframes и другой html контент.
  • Наличие Jquery не обязательно.

Начало работы

начало работы

Подключить библиотеку можем используя cdn:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.css" />
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>

Или можем скачать архив, где берем файлы из папки dist, размещаем их в проекте и подключаем локально:

<link rel="stylesheet" href="fancybox.css" />
<script src="fancybox.umd.js"></script>

Или используем менеджер пакетов:

# Usage with NPM
$ npm install --save @fancyapps/ui

# and with Yarn
$ yarn add @fancyapps/ui
import { Fancybox } from "@fancyapps/ui";
import "@fancyapps/ui/dist/fancybox/fancybox.css";

Запуск

Для начала создадим элемент, при клике на который будет появляться всплывающее окно. Пускай это будет ссылка:

<a href="image-big.jpeg" data-fancybox>
  <img src="image.jpeg" />
</a>

В теге <a> в атрибуте href помещаем ссылку на изображение + добавляем атрибут data-fancybox

Добавляем Fancybox.bind() в файл со скриптами, чтобы все заработало.

Для простого запуска этого более чем достаточно.

Также мы можем объединять наши элементы в галерею. Для этого в значении атрибута data-fancybox добавляем название галереи, по которому плагин будет группировать элементы. Например data-fancybox="my-gallery"

<a href="image1-big.jpeg" data-fancybox="my-gallery">
  <img src="image1.jpeg" />
</a>

<a href="image2-big.jpeg" data-fancybox="my-gallery">
  <img src="image2.jpeg" />
</a>

Также с помощью атрибута data-caption мы можем добавить к изображению небольшое описание:

<a href="image-big.jpeg" data-fancybox data-caption="Hello fancybox">
  <img src="image.jpeg" />
</a>
всплывающее окно и его описание

Не обязательно использовать только тег <a>. Можем воспользоваться любым другим html элементом. Нужно только добавить ему атрибут data-fancybox и data-src c ссылкой на изображение

Что еще можно запихнуть во всплывающее окно?

Можем открыть google map:

  • Открываем google map;
  • Находим необходимый населенный пункт;
  • Копируем ссылку браузера;
  • Вставляем ее в href или в data-src элемента;

Можем открыть iframe:

  • Вставляем ccылку в href или в data-src элемента;
  • Добавляем к элементу атрибут data-type="iframe"

Video:

Здесь можем использовать как просто ссылку на файл, так и ссылки на такие ресурсы как Youtube.

  • Вставляем ccылку в href или в data-src элемента;

Html блок:

  • Для этого можем скрыть элемент на странице используя css (display: none) и добавить ему атрибут id, например id="testPopup"
  • Вставляем этот id в href или в data-src элемента (#testPopup);

И да, если ты открыл попап выше, то ты заметил кнопку при нажатии на которую можно закрыть наше всплывающее окно. Достаточно добавить к этому элементу атрибут data-fancybox-close

Выводы

штош

Всё, что я показал выше — этого уже вполне достаточно, чтобы немного облегчить нелегкую долю разработчика. Однако, стоит иметь ввиду, что это всего лишь поверхностный взгляд на плагин. Он также имеет большое количество настраиваемых параметров, благодаря которым можно делать более гибкую и тонкую настройку контента. Так что продолжение следует…

Другие статьи

Как использовать дочернюю тему на WordPress doughter

Как использовать дочернюю тему на WordPress

Как использовать дочернюю тему на WordPress

Недавно поступил запрос сделать бюджетный интернет магазин с админ панелью. Само собой, в данном вопросе я решил использовать WordPress совместно с Woocommerce. Одной из предлагаемых тем плагина электронной коммерции для магазина является Storefront. Бесплатная версия, как и ожидалось, не предлагает богатый выбор настроек. Но, тем не менее, получилось хоть что-то похожее на современный интернет-магазин. Вот […]

Как перевести тему WordPress на другой язык перевод

Как перевести тему WordPress на другой язык

Как перевести тему WordPress на другой язык

Работая над созданием темы на WordPress мы довольно часто сталкиваемся с такими надписями как «загрузить еще, автор, метки» и т.д. Например как в моем блоге: Хорошо когда сайт на одном языке. Тогда с ними то особо делать ничего и не нужно. Но что делать когда сайт мультиязычный. Если заказчику в перспективе нет необходимости в будущем […]