Содержание
Фотогалерея jQuery FancyBox - это легкий, гибкий и стильный инструмент, который позволяет создавать красивые и интерактивные галереи изображений на вашем сайте. Он основан на технологии jQuery, что делает его простым в установке и использовании даже для тех, кто не является опытным разработчиком.
Подключается достаточно легко, основное что от вас требуется, это перейти в шаблон Страница материала и комментариев модуля, далее в блоке:
<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.
Там же в шаблоне страницы материала и комментариев в самом низу страницы перед тегом </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>
Вы можете установить классический вариант, для этого в скрипте, который ставится перед </body> указывается:
type: "classic"
Так же можно выбрать тип modern, тогда в скрипте указываем тип вот так:
type: "modern"
Если вы хотите скрыть миниатюры, чтобы отображалось лишь главное фото, тогда пропишите вот так:
Thumbs: false,
Важно! Данный скрипт пройдется по всему блоку в котором находится описание вашего материала, найдет все фото, добавит к ним атрибут data-fancybox="gallery" который необходим для работы галереи и дополнительно удалит с тела класс ulightbox, чтобы он не конфликтовал с fancybox.
Важно! В скрипте выше у меня используется класс posto-mes, у меня такой класс в шаблоне "страницы материала и комментариев", внутри которого находится $MESSAGE$. Вы пропишите свой класс какой у вас используется.
Источник: fancyapps.com
Лицензия: CC BY-SA 4.0
Автор: Юрий Герук
Благодарность автору!Здравствуй Гость, комментарии могут оставлять только зарегистрированные пользователи, зарегистрируйтесь и поделитесь мнением о материале выше Регистрация или Войти.