Introduction
Cylindo 360 HD Viewer is an alternative or outright replacement for traditional product imagery on product pages. It facilitates viewing of products in 360 degree rotation and up to 4K zoom.
Embed Viewer
To embed the 360 HD Viewer onto the page it is required to:
- Include Cylindo’s 360 HD Viewer JavaScript library. The 360 HD Viewer will include all the resources it depends upon.
- Include a stylesheet that defines the visual styling of the 360 HD Viewer. Cylindo provides a default stylesheet. You can replace the stylesheet if you want to customize the design.
The following sample displays the files needed to be included in the page header.
<link rel="stylesheet" type="text/css"
href="https://viewer.cylindo.com/v4/viewer.min.css">
<script src="https://viewer.cylindo.com/v4/viewer.min.js"></script>
Script paths
In your production environment you should use the stable Viewer version. It’s located on URL:
https://viewer.cylindo.com/v4/viewer.min.js
Creating the 360 HD Viewer
To use the 360 HD viewer it must first be initialized. Creating a viewer instance with default behavior may look like the following:
var viewerInstance = null;
var options = {
'accountID': 4965,
'productCode': 'EMMA_ARMCHAIR',
'features': ['UPHOLSTERY', 'YELLOW', 'LEGS', 'METAL_LEGS'],
'containerID': 'cylindoViewerWrapper'
}
if (cylindo) {
cylindo.on('ready', function () {
viewerInstance = cylindo.viewer.create(options);
});
}Changing features
When you have initiated the Viewer, you can in runtime, change the content of the 360 HD Viewer to show images of a different product configuration (different set of images) by calling the functions “setFeatures( array_of_features )” or “setConfiguration(configuration_alias_string)”. It depends on the way the first variation has been set, when it has been initialized using the configurationAlias property the setConfiguration method must be used, otherwise the setFeatures method is enabled to change the variations
The “setFeatures(...)” function takes an array of string identifiers that describes what options should be present in the 360 HD Viewer. The array should follow the format: ["feature value", "option value",.....] and should therefore always have a length that is a multiple of two. Calling “setFeatures(...)” will automatically change the viewed features when they become available. The following sample code will change the features of the current 360 HD Viewer (require instantiation of the 360HD Viewer object from the previous sample).
if(viewerInstance) {
viewerInstance.setFeatures(['UPHOLSTERY', 'YELLOW', 'LEGS', 'METAL_LEGS'] );}
The “setConfiguration(...)” method takes a string identifier of the configuration alias that group a set of options which should be present in the 360 HD viewer. The following sample code will change the configurationAlias of the current 360 HD Viewer (require instantiation of the 360HD Viewer object from the previous sample).
if(viewerInstance) {
viewerInstance.setConfiguration('EMMA_ARMCHAIR_002');}
Styling the 360 HD Viewer
The styling for the 360 HD Viewer is handled through a separate stylesheet. The stylesheet hosted on Cylindo servers contains baseline-styling and is read-only. It is possible to overwrite the default styles for the viewer but we recommend keeping custom styling to a minimum to insure compatibility with future versions.
Minimum required properties
- accountID:
- The account ID that will be given to client by Cylindo (demo customer ID is 4404).
- Type: integer
- productCode
- The furniture base sku for which the 360 HD Viewer is intended to display imagery.
- Type: string
- containerID:
- The ID of the HTML element the 360 HD Viewer will be embedded into.
- Type: string