Слайд-шоу, слайдер, лайтбокс на Cotonti в статьях
Подборка библиотек и готовых решений, которые решают задачу по интеграции lightbox, slider, slidshow на свой сайт в связке CMF Cotonti Siena v0.9.26 + модуль 'files' + Bootstrap 5.3.3
Варианты библиотек для реализации слайд-шоу, слайдера, лайтбокса в Cotonti v0.9.26 (3–10 превью с полноэкранным слайдером по клику) в кастомизированном шаблоне новостей с учётом Bootstrap 5.3.3 и Font Awesome 6.7.2.
Представленны несколько готовых библиотек, довольно современных на 2025 год, которые легко интегрируются в шаблоны Cotonti.
Общие требования и план:
Превью: 3–10 маленьких изображений в сетке, кликабельные.
Слайдер: Полноэкранный, с навигацией (стрелки, закрытие), открывается по клику на превью.
Совместимость:
- модуль files для динамических изображений.
Минимальная кастомизация: Логика шаблона не трогается, только галерея.
Готовые библиотеки и решения
Подборка библиотек и готовых решений, которые решают задачу по интеграции lightbox, slider, slidshow на свой сайт в связке CMF Cotonti Siena v0.9.26 + модуль 'files' + Bootstrap 5.3.3:
1. Bootstrap 5.3.3 Carousel + Modal (встроенное решение)
Описание: Используем встроенные компоненты Bootstrap (карусель и модаль) без сторонних библиотек, как в моём предыдущем ответе.
Плюсы:
Нативная интеграция с Cotonti, не нужно дополнительных скриптов.
Лёгкая кастомизация через CSS и существующие классы.
Полная адаптивность и поддержка ARIA для доступности.
Минусы:
Базовый дизайн, требует CSS для улучшения (например, затемнение фона, стили превью).
Ограниченные анимации (только стандартные переходы карусели).
Интеграция в page.news.tpl:
Использовать цикл FILES_ROW для вывода превью и карусели, как в моём коде.
Добавить JS для синхронизации клика по превью с активным слайдом.
Рекомендация: Если хотите минимизировать зависимости и остаться в экосистеме Bootstrap, это лучший выбор.
2. Lightbox2
Описание: Популярная библиотека для отображения изображений в модальном окне с навигацией. lightbox.js.
Плюсы:
Лёгкая (около 20 КБ минифицированный JS+CSS).
Простая интеграция: добавляем атрибут data-lightbox к изображениям.
Поддерживает галереи, навигацию, зум, адаптивность.
Минусы:
Дизайн немного устаревший, может потребовать кастомных стилей для соответствия CleanCot.
Меньше возможностей для кастомизации по сравнению с Bootstrap.
Интеграция в page.news.tpl:
Заменить текущую секцию галереи на:
<!-- IF {PHP|cot_module_active('files')} -->
<!-- IF {ID|cot_filesCount('page', $this, '', 'images')} > 0 -->
<div class="row g-2 mb-3">
<!-- BEGIN: FILES_ROW -->
<div class="col-4 col-md-3">
<a href="{FILES_ROW_URL}" data-lightbox="gallery" data-title="{FILES_ROW_TITLE}">
<img src="{FILES_ROW_URL}" alt="{FILES_ROW_TITLE}" class="img-fluid rounded" style="aspect-ratio: 1/1; object-fit: cover;">
</a>
</div>
<!-- END: FILES_ROW -->
</div>
<!-- ENDIF -->
<!-- ENDIF -->
Можно прям в шаблоне, в самом начале подключить
<script src="{PHP.cfg.themes_dir}/{PHP.cfg.defaulttheme}/js/lightbox.js"></script>
Добавить стили в <style>:
.lightbox img { max-height: 80vh; object-fit: contain; }
.lightbox { background: rgba(0,0,0,0.9); }
Рекомендация: Хороший выбор, если lightbox.js уже настроен и вы хотите быстрое решение с минимальной кастомизацией.
3. Fancybox 4
Описание: Современная библиотека для модальных галерей с поддержкой изображений, видео и кастомного контента.
Плюсы:
Красивый, современный дизайн из коробки.
Богатые возможности: зум, жесты, анимации, подписи.
Адаптивность и поддержка Bootstrap 5.
Легко интегрируется с динамическими данными Cotonti.
Минусы:
Требует подключения (около 70 КБ минифицированный JS+CSS).
Лицензия: бесплатна для некоммерческого использования, для коммерческих сайтов нужна покупка ($89+).
Интеграция в page.news.tpl:
Подключить Fancybox:
Добавить в <head> или через тему Cotonti.
<link href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.umd.js"></script>
Обновить секцию галереи:
<!-- IF {PHP|cot_module_active('files')} -->
<!-- IF {ID|cot_filesCount('page', $this, '', 'images')} > 0 -->
<div class="row g-2 mb-3">
<!-- BEGIN: FILES_ROW -->
<div class="col-4 col-md-3">
<a href="{FILES_ROW_URL}" data-fancybox="gallery" data-caption="{FILES_ROW_TITLE}">
<img src="{FILES_ROW_URL}" alt="{FILES_ROW_TITLE}" class="img-fluid rounded" style="aspect-ratio: 1/1; object-fit: cover;">
</a>
</div>
<!-- END: FILES_ROW -->
</div>
<!-- ENDIF -->
<!-- ENDIF -->
Добавить в конец шаблона (например files.gallery.fancybox.tpl )JS для инициализации:
<script>
Fancybox.bind("[data-fancybox='gallery']", {
infinite: true,
keyboard: true,
hideScrollbar: true
});
</script>
Кастомные стили (опционально):
.fancybox__content { max-height: 80vh; object-fit: contain; }
.fancybox__backdrop { background: rgba(0,0,0,0.9); }
Рекомендация: Отличный выбор, если нужен современный вид и вы готовы добавить библиотеку (и проверить лицензию для коммерческого использования).
4. PhotoSwipe
Описание: Лёгкая и быстрая библиотека для галерей, оптимизированная для мобильных устройств.
Плюсы:
Быстрая и лёгкая (около 30 КБ минифицированный JS+CSS).
Отличная производительность на мобильных устройствах (жесты, зум).
Бесплатна для всех типов проектов (MIT лицензия).
Кастомизируема через JS и CSS.
Минусы:
Требует больше JS-кода для интеграции по сравнению с Lightbox2 или Fancybox.
Дизайн требует кастомизации для соответствия CleanCot.
Интеграция в page.news.tpl:
Подключить PhotoSwipe:
<link href="https://unpkg.com/[email protected]/dist/photoswipe.css" rel="stylesheet"> <script src="https://unpkg.com/[email protected]/dist/photoswipe-lightbox.umd.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/photoswipe.umd.min.js"></script>
Обновить секцию галереи:
<!-- IF {PHP|cot_module_active('files')} -->
<!-- IF {ID|cot_filesCount('page', $this, '', 'images')} > 0 -->
<div class="row g-2 mb-3 pswp-gallery" id="gallery">
<!-- BEGIN: FILES_ROW -->
<div class="col-4 col-md-3">
<a href="{FILES_ROW_URL}" data-pswp-width="{FILES_ROW_WIDTH}" data-pswp-height="{FILES_ROW_HEIGHT}" target="_blank">
<img src="{FILES_ROW_URL}" alt="{FILES_ROW_TITLE}" class="img-fluid rounded" style="aspect-ratio: 1/1; object-fit: cover;">
</a>
</div>
<!-- END: FILES_ROW -->
</div>
<!-- ENDIF -->
<!-- ENDIF -->
Добавить JS для инициализации:
<script>
document.addEventListener('DOMContentLoaded', function() {
const lightbox = new PhotoSwipeLightbox({
gallery: '#gallery',
children: 'a',
pswpModule: PhotoSwipe,
padding: { top: 40, bottom: 40, left: 40, right: 40 },
loop: true
});
lightbox.init();
});
</script>
Кастомные стили:
.pswp__img { max-height: 80vh; object-fit: contain; }
.pswp__bg { background: rgba(0,0,0,0.9); }
Примечание: Требуются размеры изображений ({FILES_ROW_WIDTH}, {FILES_ROW_HEIGHT}). Если модуль files их не предоставляет, нужно добавить PHP-функцию в Cotonti для получения размеров.
Рекомендация: Подходит, если нужна высокая производительность и мобильная оптимизация, но требует больше времени на настройку.
Сравнение библиотек
| Библиотека | Размер (КБ) | Лицензия | Простота интеграции | Совместимость с Bootstrap | Кастомизация | Мобильность |
|---|---|---|---|---|---|---|
| Bootstrap Carousel | 0 (встроено) | MIT | Высокая | Идеальная | Средняя | Хорошая |
| Lightbox2 | ~20 | MIT | Высокая | Хорошая | Средняя | Средняя |
| Fancybox 4 | ~70 | Коммерческая/MIT* | Средняя | Отличная | Высокая | Отличная |
| PhotoSwipe | ~30 | MIT | Средняя | Хорошая | Высокая | Отличная |
*Бесплатно для некоммерческого использования, платно для коммерческого.
Итоги:
Мой выбор пал на Fancybox
Рабочий пример шаблона files.gallery.fancybox.tpl (модуль 'files')
<!-- BEGIN: MAIN -->
<style>
a[data-fancybox="gallery"] {
display: block;
text-decoration: none;
}
a[data-fancybox="gallery"]:hover {
cursor: zoom-in; /* Курсор "лупа с плюсом" */
}
a[data-fancybox="gallery"]:hover img {
transform: scale(1.05);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
filter: brightness(1.1);
transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}
a[data-fancybox="gallery"] img {
transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}
#container-carousel {
width: 100%;
}
#container-carousel .carousel-inner {
height: 320px; /* Фиксированная высота контейнера */
}
#container-carousel .carousel-item {
height: 320px; /* Фиксированная высота каждого слайда */
overflow: hidden; /* Обрезаем лишнее */
display: flex; /* Для центрирования изображения */
align-items: center; /* Вертикальное центрирование */
justify-content: center; /* Горизонтальное центрирование */
}
#container-carousel .carousel-item img {
width: 100%; /* Ширина 100% */
height: 320px; /* Высота контейнера */
object-fit: contain; /* Сохраняем пропорции */
object-position: center; /* Центрируем */
border-radius: 0.5rem; /* Сохраняем скругление */
}
</style>
<div id="container-carousel" class="carousel slide" data-bs-ride="true">
<div class="carousel-inner">
<!-- BEGIN: FILES_ROW -->
<div class="carousel-item <!-- IF {FILES_ROW_NUM} == '1' --> active<!-- ENDIF -->">
<a data-fancybox="gallery" data-src="{FILES_ROW_URL}" data-caption="{FILES_ROW_TITLE} {FILES_ROW_NAME}">
<img src="{FILES_ROW_URL}" alt="{FILES_ROW_NAME}" class="img-fluid">
</a>
</div>
<!-- END: FILES_ROW -->
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#container-carousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#container-carousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script>
Fancybox.bind('[data-fancybox="gallery"]', {
Toolbar: {
display: {
left: ["infobar"],
middle: [
"zoomIn",
"zoomOut",
"toggle1to1",
"rotateCCW",
"rotateCW",
"flipX",
"flipY",
],
right: ["slideshow", "thumbs", "close"],
},
},
});
</script>
<!-- END: MAIN -->
Интеграции шаблона files.gallery.fancybox.tpl в шаблон страницы полной новости или статьи, - page.news.tpl, page.tpl и т.д
<!-- IF {PHP|cot_module_active('files')} -->
<!-- IF {PAGE_ID|cot_filesCount('page', $this, '', 'images')} > 0 -->
<div class="mb-5">
{PAGE_ID|cot_filesGallery('page', $this, '', 'files.gallery.fancybox')}
</div>
<!-- ELSE -->
<div class="position-relative overflow-hidden rounded-5 shadow-bottom" style="aspect-ratio: 2 / 1;">
<!-- IF {PAGE_LINK_MAIN_IMAGE} -->
<img src="{PAGE_LINK_MAIN_IMAGE}" alt="{PAGE_TITLE}" class="img-fluid object-fit-cover">
<!-- ELSE -->
<img src="{PHP.cfg.themes_dir}/{PHP.cfg.defaulttheme}/img/default.webp" alt="{PAGE_TITLE}" class="img-fluid object-fit-cover">
<!-- ENDIF -->
</div>
<!-- ENDIF -->
<!-- ENDIF -->
в загрузчик темы, например в cleancot.rc.php добавить строки для подключения библиотеки локально
Resources::addFile(Cot::$cfg['themes_dir'] . '/' . Cot::$cfg['defaulttheme'] . '/assets/fancybox/fancybox.css'); Resources::addFile(Cot::$cfg['themes_dir'] . '/' . Cot::$cfg['defaulttheme'] . '/assets/fancybox/fancybox.umd.js');
Альтернативный способ скачивания fancybox
Если не хотите использовать wget или git, вы можете:
- Перейти на https://github.com/fancyapps/ui/tree/main/dist/fancybox.
- Щёлкнуть по fancybox.umd.js и fancybox.css, нажать "Download" (или скопировать содержимое через "Raw").
- Сохранить файлы в themes/cleancot/assets/fancybox/ и themes/cleancot/assets/fancybox/.
Для локальной работы слайд-шоу с Fancybox 5.0.36 вам нужны только два файла:
- dist/fancybox/fancybox.umd.js
- dist/fancybox/fancybox.css
Скачайть их с помощью wget:
wget https://raw.githubusercontent.com/fancyapps/ui/main/dist/fancybox/fancybox.umd.js -O themes/CleanCot/js/fancybox.umd.js wget https://raw.githubusercontent.com/fancyapps/ui/main/dist/fancybox/fancybox.css -O themes/CleanCot/css/fancybox.css
Это обеспечит работу слайд-шоу и самой библиотеки fancybox без CDN.
Комментарии (0)
Автор контента
Оффлайн
Sodium Carbonate
Последняя авторизация: 04.08.2026 15:17
- Страница размещена: 14.05.2025 08:22
- Последнее обновление: 14.05.2025 11:17