Модуль fancybox позволяет сделать простую галерею на сайте, путём анимированного увеличения картинки.
Для использования fancybox необходимо подключить сам модуль и стили fancybox, а также указать в теге <a> параметр fancybox. Здесь я не буду раскрывать все возможности fancybox, а остановлюсь на основном принципе работы.
Итак, приступим!
Во-первых, нам необходимо подключить на сайт модуль (script) и стили fancybox. Можно указать как ссылку со внешнего источника, так и скачать на свой хостинг и указать локальный путь. Неважно. Обычно скрипты и стили на сайте подключаются в разделе <head>...</head>.
Внешний источник можно указать любой, например такой:
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js">
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.
fancybox.min.css" />
Во-вторых, добавляем параметр fancybox в теге <a>, например так:
<a href="/Ссылка_на_изображение.jpg" data-fancybox=""><img src="/Ссылка_на_изображение.jpg" alt="" /></a>
Если мы хотим объединить несколько картинок в группу, то параметру data-fancybox присваиваем одно и то же значение:
<a href="/Ссылка_на_изображение1.jpg" data-fancybox="img"><img src="/Ссылка_на_изображение1.jpg" alt="" /></a>
<a href="/Ссылка_на_изображение2.jpg" data-fancybox="img"><img src="/Ссылка_на_изображение2.jpg" alt="" /></a>
Так легко подключается полезный модуль fancybox. Надеюсь, что данная статья была полезной!
