Слайд-шоу, слайдер, лайтбокс на Cotonti в статьях

Подборка библиотек и готовых решений, которые решают задачу по интеграции lightbox, slider, slidshow на свой сайт в связке CMF Cotonti Siena v0.9.26 + модуль 'files' + Bootstrap 5.3.3

Filed under: Cotonti - reading materials. Documentation.

Варианты библиотек для реализации слайд-шоу, слайдера, лайтбокса в Cotonti v0.9.26 (3–10 превью с полноэкранным слайдером по клику) в кастомизированном шаблоне новостей с учётом Bootstrap 5.3.3 и Font Awesome 6.7.2.

Представленны несколько готовых библиотек, довольно современных на 2025 год, которые легко интегрируются в шаблоны Cotonti.

Общие требования и план:

    Превью: 3–10 маленьких изображений в сетке, кликабельные.
    Слайдер: Полноэкранный, с навигацией (стрелки, закрытие), открывается по клику на превью.


Совместимость: 

- Bootstrap 5.3, 

- Cotonti Siena v0.9.26, 

- модуль 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, вы можете:

  1. Перейти на https://github.com/fancyapps/ui/tree/main/dist/fancybox.
  2. Щёлкнуть по fancybox.umd.js и fancybox.css, нажать "Download" (или скопировать содержимое через "Raw").
  3. Сохранить файлы в 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.

7 minutes read Sodium Carbonate

Comments (0)

No comments yet
Only registered users can post new comments

Article multicategories

Additional categories where this article is shown as similar.

Content author

webitproff

Offline

Sodium Carbonate

Last logged: 2026-09-18 20:01

About me briefly
Support and development of web projects on the CMF Cotonti: private messengers via the website, open and closed small social networks, trading platforms and marketplaces, freelance and services exchange portal, catalogs of goods from wholesale suppliers, dropshipping platforms, online stores, and much more.
View developments and download
Public portfolio of my works and developments
Telegram for messages
@webitproff
Telegram channel
@s/aBuyFILE
  • Page published: 2025-05-14 08:22
  • Last update: 2025-05-14 11:17