Содержание
Фотогалерея jQuery FancyBox - это легкий, гибкий и стильный инструмент, который позволяет создавать красивые и интерактивные галереи изображений на вашем сайте. Он основан на технологии jQuery, что делает его простым в установке и использовании даже для тех, кто не является опытным разработчиком.
Подключается достаточно легко, основное что от вас требуется, это перейти в шаблон Страница материала и комментариев модуля, далее в блоке:
<head>сюда</head>
подключить стили:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox/fancybox.css"/>
Далее в самом низу шаблона перед тегом:
</body>
подключить скрипт:
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/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
Автор: Юрий Герук
Благодарность автору!
Автор: 1. Наверное посмотреть шаблон страницы материала и комментариев и посмотреть внутри какого div у вас находится $MESSAGE$.
2. Только фото с конкретной страницы с всего материала вытягиваются в галерею, с других материалов в рамках одной страницы фото не вытягиваются. Какую смотрим, вот с этого материала и вытягиваются. Смотрим другую, будут с нее вытягиваться. Если на странице одно фото, тогда по клику будет увеличиваться лишь одно. 3. Только в виде блока превьюшек под основным фото, там вид немного меняется. | |
Здравствуй Гость, комментарии могут оставлять только зарегистрированные пользователи, зарегистрируйтесь и поделитесь мнением о материале выше Регистрация или Войти.
