Interactive 360° rotation

What this solution does

The module provides interactive 360-degree rotation for products. Administrators upload a series of photos taken around an object, while visitors can rotate the image using a mouse, touch, or keyboard directly on the product page.

Standard product cards typically display an item from two or three angles. A 360-degree view allows customers to examine the product from all sides, accelerating the purchase decision and reducing returns caused by mismatched expectations.

The module handles all technical processes: storing frame sequences, generating optimized image copies in modern formats, ensuring smooth rotation animation, and embedding the viewer into the site interface. Content managers only need to upload the source photographs.

Key features

Galleries and frame upload

- Unlimited number of independent galleries;

- Upload via standard form: JPEG, PNG, WebP, GIF formats or ZIP archives containing frames;

- Automatic sorting of new frames by filename in natural order (frame-1, frame-2, frame-10);

- Manual reordering of frames via drag-and-drop and removal of unnecessary images;

- JPEG normalization during upload: EXIF orientation correction, removal of excess metadata, and conversion of color profiles to sRGB if the Imagick extension is available.

Site viewing

Interactive 360° Rotation

The module supports image rotation via mouse, touch gestures, keyboard arrow keys, and a frame slider. It features inertia after a swipe, with configurable sensitivity and rotation direction. Zooming is available via mouse wheel, pinch gestures, and keyboard shortcuts, along with panning for zoomed frames. Auto-rotation stops when the viewer moves out of the visible screen area. A non-looping mode allows scrolling from the first frame to the last and back. Fullscreen mode is supported, including in browsers without native Fullscreen API, such as Safari on iPhone. Multiple independent viewers can be placed on a single page.

Styling

Each control panel element can be toggled individually: navigation arrows, auto-rotation button, frame slider, zoom buttons, fullscreen button, rotation hint, loading bar, corner fullscreen marker, and the "360°" badge. Colors are customizable for the image background, panel background, button colors, and accent color. The viewer size automatically adapts to the container width. The layout relies on external CSS and JavaScript files without inline script or style tags, ensuring compatibility with strict Content-Security-Policy headers.

Performance

Each frame is provided in WebP and AVIF formats, along with reduced-size variants optimized for mobile devices.

The module provides interactive 360-degree object rotation. Images are delivered via the picture tag, allowing the browser to automatically select the most lightweight supported format. To improve performance, adjacent frames are preloaded instead of loading the entire sequence at once; the switching mode is configurable via component parameters. Image processing is offloaded to a background queue with atomic task locking, automatic recovery of hung tasks, and retry logic for errors. Source frames become available immediately after upload, without waiting for optimization. The component uses standard caching with the ability to manually clear the cache after gallery changes.

Catalog Integration

A custom information block property type named '360 Binding' allows selecting the gallery directly from the product card dropdown. The component automatically locates the correct gallery based on the product, enabling a single template call to serve the entire catalog. In multi-site configurations, galleries can be restricted to specific sites.

Administration and Control

A diagnostics page displays the schema version, queue status, and the volume of both source and optimized storage. It includes the agent launch mode with warnings about launching on active hits, as well as tools to search for and delete lost files with a 24-hour protection period. An administrator action log records the user, timestamp, associated gallery, and IP address.

The module adds an 'Integration' tab to the gallery editor, providing ready-to-use connection examples. All operations that modify data are protected against CSRF attacks.

The following sections are available in the admin panel:

Services → Interactive 360° Rotation

Settings → Product Settings → Module Settings → Interactive 360° Rotation

General iT can install and configure this module and check how it works on your website.