Overview

WebRotate 360 Product Viewer is an advanced solution for publishing highly interactive 360 product views, 3D product spins and the variety of e-commerce, e-learning and other knowledge base material. Find more details on our core product page or in this user guide.

This repo is available for users who need to integrate webrotate's 360 viewer runtime (i.e. browser based scripts or "imagerotator") in the modular builds of their websites and web apps.

Examples

https://www.webrotate360.com/examples/browse-all-examples.aspx

Installation

npm install @webrotate360/imagerotator --save

Usage

1 . Require imagerotator after installation:

import WR360 from '@webrotate360/imagerotator';

2 . Require viewer themes or an individual theme, e.g. thin.css, round.css, etc. (located under build/css):

import '@webrotate360/imagerotator/build/css/all.css';

3 . Add container element with some id:

<div id="webrotate360">
</div>

4 . There are two folders under resources in the root of the repo that you can copy to your website root for a quick test:

• example contains a test 360 product view.
• graphics contains default hotspot indicator SVG images.

5 . Initialize and run (e.g. in React's componentDidMount):

const viewer = WR360.ImageRotator.Create('webrotate360');

viewer.licenseCode = 'your-license-code';
viewer.settings.configFileURL = '/example/example.xml';
viewer.settings.graphicsPath = '/graphics';
viewer.settings.alt = 'Your alt image description';
viewer.settings.responsiveBaseWidth = 800;
viewer.settings.responsiveMinHeight = 300;

viewer.settings.apiReadyCallback = (api, isFullScreen) => {
    this.viewerApi = api;
    this.viewerApi.images.onDrag(event => {
        console.log(`${ event.action }; current image index = ${ this.viewerApi.images.getCurrentImageIndex() }`);
    });
}

viewer.runImageRotator();

6 . Destroy viewer instance when not needed (e.g. in React's componentWillUnmount):

if (this.viewerApi)
    this.viewerApi.delete();

A simple React example is available via imagerotator-react-example.

Documentation

Review API and Extended API sections in the user guide. Alternatively, browse through these integration templates (e.g. template_api.html).

License

See license in EULA.pdf