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

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

Опубликовано в: Cotonti - чтиво. Документация.

Варианты библиотек для реализации слайд-шоу, слайдера, лайтбокса в 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.

Комментарии (0)

Комментарии отсутствуют
Добавление комментариев доступно только зарегистрированным пользователям

Автор контента

webitproff

Оффлайн

webitproff

Последняя авторизация: 17.07.2025 13:20

  • Страница размещена: 14.05.2025 07:22
  • Последнее обновление: 14.05.2025 10:17