Содержание
Что такое фотогалерея 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
Автор: Юрий Герук
Комментарии
2. Только фото с конкретной страницы с всего материала вытягиваются в галерею, с других материалов в рамках одной страницы фото не вытягиваются. Какую смотрим, вот с этого материала и вытягиваются. Смотрим другую, будут с нее вытягиваться.
Если на странице одно фото, тогда по клику будет увеличиваться лишь одно.
3. Только в виде блока превьюшек под основным фото, там вид немного меняется.