Как добавить видео в галерею Fotorama на MODX: значок на первом кадре

Владельцы интернет-магазинов на MODX с компонентом miniShop2 часто используют галерею msGallery на базе Fotorama. Стандартно все изображения открываются в полноэкранном режиме. Однако возникает задача: сделать первый кадр видеообложкой, при клике на которую запускается попап с видео (например, YouTube или Vimeo), а остальные изображения остаются без изменений. В этой статье разберём, как это реализовать без взлома ядра Fotorama, с помощью небольшой доработки чанка и JavaScript.

Особенности галереи Fotorama в MODX

Галерея Fotorama в msGallery выводит изображения через чанк, который генерирует ссылки на полноразмерные картинки. Каждый файл - это <a href="{$file['url']}" target="_blank">. Для добавления видео нужно модифицировать вывод первого элемента так, чтобы вместо ссылки на изображение появилась ссылка на видео, а в миниатюре отображалась обложка со значком плеера.

Пошаговая инструкция: как изменить первый кадр

Шаг 1. Редактирование чанка msGallery

Откройте чанк msGallery (или ваш аналог). Найдите цикл {foreach $files as $file}. Внутри цикла добавьте проверку на первый элемент с помощью {$file@first}. Если это первый файл, выводите специальную разметку для видео, иначе - стандартную ссылку. Пример кода:

{if $file@first}
    <a href="https://www.youtube.com/embed/ВАШ_ID" class="popup-video" data-fancybox>
        <img src="{$file['url'] | phpthumbon : 'w=100&h=100&zc=1'}" alt="Видеообзор">
    </a>
{else}
    <a href="{$file['url']}" target="_blank">
        <img src="{$file['url'] | phpthumbon : 'w=100&h=100&zc=1'}" alt="Фото товара">
    </a>
{/if}

В этом коде мы используем класс popup-video и атрибут data-fancybox для последующей инициализации всплывающего окна через Fancybox или аналогичную библиотеку.

Шаг 2. Подключение JavaScript для попапа

Чтобы при клике на первый кадр открывалось видео, а не изображение, подключите на странице библиотеку для модальных окон (например, Fancybox или Magnific Popup). Инициализируйте её для элементов с классом popup-video. Пример на jQuery:

$(document).ready(function() {
    $('.popup-video').fancybox({
        type: 'iframe',
        iframe: {
            preload: false
        }
    });
});

Если вы используете Fotorama, отключите стандартное поведение для первого кадра: добавьте к ссылке data-fotorama="false", чтобы Fotorama не перехватывала клик.

Шаг 3. Добавление значка проигрывателя

Чтобы на миниатюре первого кадра отображался значок play, используйте CSS. Добавьте на сайт следующий стиль:

.popup-video {
    position: relative;
    display: inline-block;
}
.popup-video::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    background: url('/path/to/play-icon.png') no-repeat center;
    background-size: contain;
    pointer-events: none;
}

Убедитесь, что путь к иконке указан верно. Иконку можно скачать или использовать SVG.

Частые вопросы по настройке

Многие разработчики сталкиваются с тем, что Fotorama не даёт гибко управлять отдельными кадрами. Решение - не править саму библиотеку, а изменить чанк вывода. Если вам нужно сохранить все стандартные функции (свайп, авто-воспроизведение), просто добавьте условие для первого элемента. Второй способ - использовать data-attributes для обхода стандартного поведения, но это сложнее и менее надёжно.

Заключение

Мы разобрали, как интегрировать видео в галерею Fotorama на MODX, заменив первый кадр на обложку со значком проигрывателя. Главное - отредактировать чанк msGallery, добавив условие на первый элемент, и подключить JavaScript для открытия видео в попапе. Такой подход не ломает остальные изображения и легко поддерживается.