• Главная
  • uCoz
  • Как подключить на свой сайт современный плагин FancyBox

Как подключить на свой сайт современный плагин FancyBox

Что такое фотогалерея jQuery FancyBox?

Фотогалерея jQuery FancyBox - это легкий, гибкий и стильный инструмент, который позволяет создавать красивые и интерактивные галереи изображений на вашем сайте. Он основан на технологии jQuery, что делает его простым в установке и использовании даже для тех, кто не является опытным разработчиком.

Основные возможности FancyBox:

  • Адаптивный дизайн: FancyBox адаптируется под различные устройства и размеры экранов, обеспечивая оптимальный просмотр изображений на всех устройствах, от компьютеров до мобильных телефонов.
  • Поддержка различных медиаформатов: Он поддерживает различные форматы изображений, видео и даже внешние ресурсы, такие как YouTube и Vimeo, что позволяет создавать многофункциональные галереи контента.
  • Кастомизация: Вы можете легко настроить внешний вид и поведение FancyBox, добавляя собственные CSS стили и настройки анимации, чтобы соответствовать стилю вашего сайта.
  • Простота использования: FancyBox поставляется с простым и интуитивно понятным API, что делает его легким в интеграции с вашим сайтом и управлении содержимым галереи.

Пример работы галереи FancyBox

  

Как подключить FancyBox для сайтов uCoz / uWeb?

Подключается достаточно легко, основное что от вас требуется, это перейти в шаблон Страница материала и комментариев модуля, далее в блоке:

<head>сюда</head>

подключить стили:

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

Далее в самом низу шаблона перед тегом:

</body>

подключить скрипт:

 <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@5.0/dist/fancybox/fancybox.umd.js"></script>
 <script>
 Fancybox.bind('[data-fancybox="gallery"]', {
 Thumbs : {
 type: "classic"
 }
 }); 
 </script>

Это основное что нужно для того чтобы у вас на сайте начал работать FancyBox, но этого еще недостаточно. Так как у нас на сайтах по умолчанию используется uLightbox, нам придется на уровне скрипта его вырезать и подменить на FancyBox.

Заменяем на уровне скрипта uLightbox на FancyBox

Там же в шаблоне страницы материала и комментариев в самом низу страницы перед тегом </body> установить такой скрипт:

<script type="text/javascript">
document.querySelectorAll('.posto-mes img').forEach(image => {
 let parent = image.parentElement
// simple image 
 if (parent.nodeName.toLowerCase() != 'a') {
 $(image).wrap(`<a data-fancybox="gallery" href="${ image.src }">`);
// uCoz entry image w/ ulightbox preview link 
} else if (parent.nodeName.toLowerCase() == 'a' || parent.classList.contains('ulightbox')) {
 parent.classList.remove('ulightbox')
 parent.setAttribute('data-fancybox', 'gallery')
 }
}) 
</script>

Галерея FancyBox имеет несколько вариантов оформления

Вы можете установить классический вариант, для этого в скрипте, который ставится перед </body> указывается:

type: "classic"

Так же можно выбрать тип modern, тогда в скрипте указываем тип вот так:

type: "modern"

Если вы хотите скрыть миниатюры, чтобы отображалось лишь главное фото, тогда пропишите вот так:

Thumbs: false,

Важно! Данный скрипт пройдется по всему блоку в котором находится описание вашего материала, найдет все фото, добавит к ним атрибут data-fancybox="gallery" который необходим для работы галереи и дополнительно удалит с тела класс ulightbox, чтобы он не конфликтовал с fancybox.

Важно! В скрипте выше у меня используется класс posto-mes, у меня такой класс в шаблоне "страницы материала и комментариев", внутри которого находится $MESSAGE$. Вы пропишите свой класс какой у вас используется.

Источникfancyapps.com

Лицензия: CC BY-SA 4.0

Автор: Юрий Герук

Помогла ли вам статья?
Да Нет
Статья оказалась полезной для 0 человек
avatar
Здравствуйте. Отличный материал, отличное решение для создания галереи.

Несколько уточняющих вопросов:
1.Как узнать какой класс, у меня в шаблоне "страницы материала и комментариев", внутри которого находится $MESSAGE$?
2. Мы ставим FancyBox в код шаблона "Страница материала и комментариев" определённого модуля, но я понял что в галерее будут отображаться все фото данного блока, а не только одна картинка с конкретной странице (у меня, к примеру, на большинства страницах по одному фото). Я правильно понимаю, что кликнув по картинке на определённой странице в галерее будут показаны все картинки блока?
3. В чем разница между вариантами type: "classic" и type: "modern"? Я что то не нашёл информации.

Обязательно буду пробовать FancyBox для сайтов uCoz. Вот только пойму все нюансы.
Автор: 1. Наверное посмотреть шаблон страницы материала и комментариев и посмотреть внутри какого div у вас находится $MESSAGE$.
2. Только фото с конкретной страницы с всего материала вытягиваются в галерею, с других материалов в рамках одной страницы фото не вытягиваются. Какую смотрим, вот с этого материала и вытягиваются. Смотрим другую, будут с нее вытягиваться.
Если на странице одно фото, тогда по клику будет увеличиваться лишь одно.
3. Только в виде блока превьюшек под основным фото, там вид немного меняется.