Быстрый старт
Это руководство поможет вам установить, настроить и вывести вашу первую галерею с помощью компонента Gallery3x за несколько простых шагов.
Шаг 1: Установка компонента
При установке компонент автоматически создаст все необходимые элементы: таблицы в базе данных, системные настройки, плагины и специальный Источник файлов "Gallery3x Source".
Обязательно должен быть установлен pdoTools
Шаг 2: Настройка
После установки нужно убедиться, что компонент будет работать на нужных страницах.
Важно: Если это поле останется пустым, вкладка "Галерея" не появится на страницах ресурсов.
Шаг 3: Загрузка изображений
Шаг 4: Вывод галереи на сайте
Теперь выведем загруженные изображения на страницу.
Кастомизация чанков
Для изменения внешнего вида галереи рекомендуется не редактировать стандартные чанки компонента (
tpl.Gallery3x...) напрямую. При обновленииGallery3xвсе ваши изменения в этих файлах могут быть перезаписаны.Самый правильный способ — создать копию стандартного чанка, дать ей уникальное имя (например,
tpl.mysite.gallery.item) и уже в ней производить все необходимые изменения. Затем просто укажите имя вашего нового чанка в вызове сниппета.
Подключите библиотеки В шаблоне вашей страницы подключите стили и скрипты для галереи fancybox
-
Пример карусели
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.0/dist/fancybox/fancybox.css" /> [[!Gallery3x? &tplOuter=`tpl.Gallery3x.Fancybox.outer` &tplThumb=`tpl.Gallery3x.Fancybox.thumbItem` ]] <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.0/dist/fancybox/fancybox.umd.js"></script> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function() { const mainContainer = document.getElementById('fancybox-main-[[*id]]'); const thumbsContainer = document.getElementById('fancybox-thumbs-[[*id]]'); if (!mainContainer || !thumbsContainer) return; const thumbLinks = thumbsContainer.querySelectorAll('.thumb-item'); // Инициализируем Fancybox на всех превью Fancybox.bind('[data-fancybox="gallery-[[*id]]"]', { // Ваши настройки Fancybox, если нужны }); // Обрабатываем клики по превью для смены главного изображения thumbsContainer.addEventListener('click', function(e) { e.preventDefault(); const target = e.target.closest('.thumb-item'); if (!target) return; const mainImage = mainContainer.querySelector('img'); const mainLink = mainContainer.querySelector('a'); mainImage.src = target.dataset.mediumUrl; mainLink.href = target.href; mainLink.setAttribute('data-caption', target.getAttribute('data-caption')); thumbLinks.forEach(link => link.classList.remove('is-active')); target.classList.add('is-active'); }); // Делаем первое превью активным if (thumbLinks.length > 0) { thumbLinks[0].classList.add('is-active'); } }); </script>Пример карусели с феном
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.0/dist/fancybox/fancybox.css" /> <style> .fancybox-carousel-container { max-width: 800px; margin: 40px auto; } .fancybox-carousel-main { margin-bottom: 15px; border-radius: 5px; overflow: hidden; box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .fancybox-carousel-main img { width: 100%; height: auto; display: block; cursor: pointer; } .fancybox-carousel-thumbs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; } .fancybox-carousel-thumbs .thumb-item { display: block; border: 2px solid transparent; border-radius: 4px; overflow: hidden; transition: border-color 0.2s ease; flex-shrink: 0; } .fancybox-carousel-thumbs .thumb-item:hover, .fancybox-carousel-thumbs .thumb-item.is-active { border-color: #007bff; } .fancybox-carousel-thumbs .thumb-item img { width: 100px; height: 75px; display: block; object-fit: cover; } </style> [[!Gallery3x? &fenom=`1` &tplOuter=`tpl.Gallery3x.Fancybox.Carousel.fenom` ]] <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.0/dist/fancybox/fancybox.umd.js"></script> <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function() { const mainContainer = document.getElementById('fancybox-main-[[*id]]'); const thumbsContainer = document.getElementById('fancybox-thumbs-[[*id]]'); if (!mainContainer || !thumbsContainer) return; const thumbLinks = thumbsContainer.querySelectorAll('.thumb-item'); // Инициализируем Fancybox на всех превью Fancybox.bind('[data-fancybox="gallery-[[*id]]"]', { // настройки Fancybox, если нужны }); // Обрабатываем клики по превью для смены главного изображения thumbsContainer.addEventListener('click', function(e) { e.preventDefault(); const target = e.target.closest('.thumb-item'); if (!target) return; const mainImage = mainContainer.querySelector('img'); const mainLink = mainContainer.querySelector('a'); mainImage.src = target.dataset.mediumUrl; mainLink.href = target.href; mainLink.setAttribute('data-caption', target.getAttribute('data-caption')); thumbLinks.forEach(link => link.classList.remove('is-active')); target.classList.add('is-active'); }); // Делаем первое превью активным if (thumbLinks.length > 0) { thumbLinks[0].classList.add('is-active'); } }); </script>
Пример "Ленты с превью"
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.0/dist/fancybox/fancybox.css"/>
[[!Gallery3x?
&tplOuter=`tpl.Gallery3x.Fancybox.GridOuter`
&tplThumb=`tpl.Gallery3x.Fancybox.GridItem`
]]
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.0/dist/fancybox/fancybox.umd.js"></script>
<script>
Fancybox.bind('[data-fancybox="gallery"]', {
//
});
</script>
Пример "Ленты с превью" с fenom
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.0/dist/fancybox/fancybox.css"/>
[[!Gallery3x?
&tplOuter=`tpl.Gallery3x.Fancybox.GridOuter.fenom`
&fenom=`1`
]]
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@6.0/dist/fancybox/fancybox.umd.js"></script>
<script>
Fancybox.bind('[data-fancybox="gallery-[[*id]]"]', {
//
});
</script>