Поле Галерея товара — современное адаптивное поле фото- и видео-галереи для карточки товара и каталогов на InstantCMS 2.
Вертикальная и горизонтальная лента миниатюр в стиле ведущих маркетплейсов, встроенная поддержка видео (VK Видео, Rutube, YouTube), плавный полноэкранный зум до 300% с перетаскиванием, умная адаптивность под смартфоны.
О дополнении
Галерея товара — поле для InstantCMS 2, созданное для демонстрации товаров, услуг и визуального контента на уровне современных e-commerce платформ (Wildberries, Ozon, Livemaster, Lamoda).
В отличие от стандартных галерей, дополнение объединяет в одном элементе качественные фотографии, видео-обзоры с популярных видеохостингов, адаптивную навигацию и мощный полноэкранный режим детального просмотра.
Где и как использовать?
Интернет-магазины и витрины товаров:
Одежда, обувь, кожгалантерея, аксессуары (покупатели могут рассмотреть фактуру кожи, швы и детали кроя).
Электроника, гаджеты и бытовая техника (демонстрация товара со всех ракурсов + видеообзор распаковки и работы).
Мебель, декор и товары для дома.
Каталоги мастеров и изделий ручной работы (Handmade & Craft):
Ювелирные украшения, керамика, картины, авторские сувениры.
Недвижимость и интерьеры:
Демонстрация планировок, фотографий комнат и видео-туров по объекту.
Портфолио специалистов:
Дизайнеры, архитекторы, фотографы, тюнинг-ателье, строительные компании.
Любой тип контента InstantCMS:
Поле легко добавляется к товарам, объявлениям, записям блогов или любому произвольному типу контента в панели управления.
Преимущества для посетителя сайта (Покупателя)
Быстрое и удобное знакомство с товаром:
Вертикальная лента миниатюр расположена слева от главного фото.
Пользователь легко листает кадры колесиком мыши, кликами или клавиатурой, при этом блок цены,
характеристик и кнопка «Купить» всегда остаются перед глазами без лишнего вертикального скролла страницы.
Видеообзоры прямо в карточке товара:
Поддержка видеороликов из VK Видео, Rutube и YouTube.
Посетителю не нужно переходить на сторонние сайты — видео запускается в основном окне или в полноэкранном режиме в один клик.
Полноэкранный режим с плавным зумом (до 3x):
Клик по главному фото открывает просторный модальный просмотрщик. Колесиком мыши или кнопками зума изображение увеличивается до 300%, а функция drag-to-pan позволяет плавно перемещать увеличенное изображение, чтобы изучить мельчайшие текстуры.
Идеальная адаптивность для мобильных устройств:
На смартфонах и планшетах лента автоматически перестраивается в компактную нижнюю строку с поддержкой тач-свайпов. При повороте телефона в альбомную ориентацию (landscape) галерея мгновенно адаптирует пропорции без обрезки кадров.
Нулевой сдвиг макета (CLS = 0): Фиксированные адаптивные пропорции гарантируют, что верстка страницы не «прыгает» во время загрузки тяжелых фото.
Преимущества для владельца и администратора сайта
Удобная Drag-and-Drop загрузка:
В форме добавления/редактирования товара фото загружаются перетаскиванием пачки файлов. Порядок кадров меняется простым перетаскиванием карточек, а назначение главной обложки делается в 1 клик (иконка звёздочки).
Автоматическая нарезка изображений:
Используются встроенные пресеты InstantCMS (small, normal, big, original), что обеспечивает быструю загрузку страниц и экономию дискового пространства.
Гибкая настройка внешнего вида без правки кода:
— Стиль стрелок миниатюр: светлый фон, тёмный фон или круглые плавающие кнопки.
— Выбор акцентного цвета под фирменный стиль сайта.
— Настройка пресета размеров миниатюр: стандартный (68×68 px) или крупный (80×80 px).
— Настройка стилей полноэкранного окна: современная сетка или акцентный режим без сетки с настраиваемым цветом шапки.
— Настройка масштаба зума (от 1.5x до 4.0x) и степени размытия фона.
— Режим отображения в списке каталога (тизере): Возможность включить отображение первой обложки или интерактивной мини-галереи прямо в плитке каталога.
— Чистый код и высокая производительность: Написан на Vanilla JavaScript и нативном CSS без тяжелых внешних библиотек.