Интерактивное вращение 360°

Что умеет решение

Модуль обеспечивает интерактивное вращение товара на 360 градусов. Администратор загружает серию снимков объекта, сделанных по кругу, а посетитель может вращать изображение мышью, касанием или клавиатурой непосредственно на странице товара.

Стандартная карточка товара обычно демонстрирует объект с двух-трёх ракурсов. Круговой обзор позволяет покупателю детально изучить изделие со всех сторон, что ускоряет принятие решения о покупке и снижает количество возвратов из-за несоответствия ожиданий.

Модуль полностью автоматизирует техническую часть: хранит серии кадров, создаёт оптимизированные копии изображений в современных форматах, обеспечивает плавную анимацию вращения и интегрирует просмотрщик в интерфейс сайта. Контент-менеджеру достаточно загрузить исходные фотографии.

Основные возможности

Галереи и загрузка кадров

- Поддержка неограниченного количества независимых галерей;

- Загрузка через стандартную форму: форматы JPEG, PNG, WebP, GIF или ZIP-архив с набором кадров;

- Автоматическая сортировка новых кадров по имени файла в естественном порядке (frame-1, frame-2, frame-10);

- Возможность ручной перестановки кадров перетаскиванием и удаление лишних изображений;

- Нормализация JPEG при загрузке: коррекция ориентации по EXIF, удаление избыточных метаданных и приведение цветового профиля к sRGB при наличии расширения Imagick.

Просмотр на сайте

Интерактивное вращение 360°

Модуль обеспечивает управление вращением изображения с помощью мыши, жестов на сенсорном экране, клавиш со стрелками и шкалы кадров. Реализована инерция после броска, а также настройка чувствительности и направления вращения. Доступно масштабирование колесом мыши, жестом щипка и клавишами, а также панорамирование увеличенного кадра. Автоматическое вращение останавливается, когда просмотрщик выходит за пределы видимой области экрана. Поддерживается режим без зацикливания: прокрутка идет от первого кадра до последнего и обратно. Работает полноэкранный режим, в том числе в браузерах без нативного API Fullscreen, например Safari на iPhone. На одной странице возможно размещение нескольких независимых просмотрщиков.

Настройка внешнего вида

Каждый элемент панели управления включается и выключается отдельно: стрелки, кнопка автовращения, шкала кадров, кнопки масштаба, кнопка полного экрана, подсказка о вращении, полоса загрузки, маркер полного экрана в углу кадра и метка «360°». Доступна настройка цветов фона под изображениями, фона панели, кнопок и акцентного цвета. Размеры просмотрщика автоматически адаптируются под ширину родительского контейнера. Вёрстка построена на внешних файлах CSS и JavaScript без встроенных тегов script и style, что обеспечивает совместимость со строгими политиками безопасности контента (Content-Security-Policy).

Производительность

Для каждого кадра генерируются копии в форматах WebP и AVIF, а также уменьшенные версии, оптимизированные для мобильных устройств.

Модуль обеспечивает интерактивное вращение объектов на 360 градусов. Изображения передаются через тег picture, позволяя браузеру автоматически выбирать наиболее лёгкий поддерживаемый формат. Для ускорения работы используется предзагрузка соседних кадров вместо загрузки всей последовательности сразу; режим переключения настраивается параметрами компонента. Обработка изображений вынесена в фоновую очередь с обеспечением атомарной блокировки задач, автоматическим восстановлением зависших заданий и повторной попыткой при ошибках. Исходные кадры становятся доступными сразу после загрузки, без ожидания завершения оптимизации. Компонент использует стандартное кеширование с возможностью ручного сброса кеша после изменения галереи.

Интеграция с каталогом

Реализован пользовательский тип свойства инфоблока «Привязка к 360», позволяющий выбирать галерею непосредственно в карточке товара из выпадающего списка. Компонент автоматически определяет нужную галерею по товару, что позволяет одному вызову в шаблоне обслуживать весь каталог. В многосайтовой конфигурации галерею можно ограничить конкретным сайтом.

Администрирование и контроль

Доступна страница диагностики, отображающая версию схемы, состояние очереди, объём исходного и оптимизированного хранилища, а также режим запуска агентов с предупреждением о риске запуска на активных хитах. Реализован поиск и удаление потерянных файлов с защитным периодом 24 часа. Ведётся журнал действий администратора, фиксирующий исполнителя, время, связанную галерею и IP-адрес.

Модуль добавляет вкладку «Интеграция» в редактор галереи с готовыми примерами подключения. Все операции, изменяющие данные, защищены от CSRF-атак.

В административной панели доступны следующие разделы:

Сервисы → Интерактивное вращение 360°

Настройки → Настройки продукта → Настройки модулей → Интерактивное вращение 360°

General iT поможет установить модуль, настроить его и проверить работу на твоём сайте.