Articles in this section

Viewer examples

Here are some examples of how you can configure the 360 HD Viewer on your site. In the examples, you can click on the HTML, CSS or JS tab to see our reference implementation. 

360 Viewer

See the Pen Simple example v4 by cylindo (@cylindo) on CodePen.

 

360 Viewer - Carousel

See the Pen Simple carousel example v4 by cylindo (@cylindo) on CodePen.

 

360 Viewer - Stacked

See the Pen Simple stacked exaple v4 by cylindo (@cylindo) on CodePen.

Alternate content

360 HD Viewer with alternate content.

See the Pen ALTERNATE_CONTENT v4 by cylindo (@cylindo) on CodePen.

 

Alternate content - Update

360 HD viewer where alternate content is updated at runtime.

See the Pen UPDATE_ALTERNATE_CONTENT v4 by cylindo (@cylindo) on CodePen.

 

Background

360 HD Viewer with custom background.

See the Pen Viewer with background v4 by cylindo (@cylindo) on CodePen.

 

Background color

360 HD Viewer with background color.

See the Pen BACKGROUND_COLOR v4 by cylindo (@cylindo) on CodePen.

 

Change features

360 HD Viewer with multiple features that can be selected by user in a configuration panel.

See the Pen Viewer with multiple features v4 by cylindo (@cylindo) on CodePen.

 

Fallback image

360 HD Viewer with fallback image.

See the Pen Viewer with fallback image v4 by cylindo (@cylindo) on CodePen.

 

Get current image url

360 HD Viewer where the function to get the current image is used.

See the Pen GET_CURRENT_IMAGE_URL v4 by cylindo (@cylindo) on CodePen.

 

Remove environment shadow

Example of 360 Viewer without environment shadows.

See the Pen Remove Environment Shadow v4 by cylindo (@cylindo) on CodePen.

 

Start frame

360 HD Viewer with start frame set to frame 10.

See the Pen startFrame v4 by cylindo (@cylindo) on CodePen.

 

Thumbs bar

360 HD Viewer with a thumbs bar.

See the Pen Example with thumbs v4 by cylindo (@cylindo) on CodePen.

 

Thumbs bar angels

360 HD Viewer with thumb angles set to 0, 90 and -90 degrees.

See the Pen Viewer with custom thumb angles v4 by cylindo (@cylindo) on CodePen.

 

Thumbs bar location

360 HD Viewer with thumbsbar location set to left.

See the Pen Thumbnails location v4 by cylindo (@cylindo) on CodePen.

 

Thumbs bar - Reorder content

360 HD Viewer where the alternate content is managed to be displayed in different positions.

See the Pen REORDER_THUMBNAILS_BAR v4 by cylindo (@cylindo) on CodePen.

 

Viewer events

Example of 360 Viewer with event listeners.

See the Pen Listen to events v4 by cylindo (@cylindo) on CodePen.

 

Viewer without GA events

Example of 360 Viewer without GA events enabled.

See the Pen V4 gaEvents property by cylindo (@cylindo) on CodePen.

 

Webnative AR

Example of 360 Viewer with webnative AR.

See the Pen View in AR V4 by cylindo (@cylindo) on CodePen.

 

Webnative AR with QR code

Example of 360 Viewer with webnative AR with QR code.

See the Pen V4 ARDesktop property by cylindo (@cylindo) on CodePen.

 

Webnative AR with AR banner (Default)

Example of 360 Viewer with webnative AR with an AR banner. The banner is displayed on iOS and Android. The banner is also using default values.

See the Pen Default values by cylindo (@cylindo) on CodePen.

 

Webnative AR with AR banner only on Android

Example of 360 Viewer with webnative AR with an AR banner displayed only on Android devices.

See the Pen AR Banner only on Android by cylindo (@cylindo) on CodePen.

 

Webnative AR with AR banner only on iOS

Example of 360 Viewer with webnative AR with an AR banner displayed only on iOS devices.

See the Pen AR Banner only on iOS by cylindo (@cylindo) on CodePen.

 

Webnative AR with AR banner with androidTitle

Example of 360 Viewer with webnative AR with an AR banner. The AR banner shows an alternative title on Android devices.

See the Pen AR Banner with alternative title on Android by cylindo (@cylindo) on CodePen.

 

Webnative AR with AR banner with getArRedirectUrl

Example of 360 Viewer with webnative AR with an AR banner. The AR banner redirects to a custom redirect URL.

See the Pen AR Banner with custom redirect url by cylindo (@cylindo) on CodePen.

 

Webnative AR with AR banner updated at runtime

Example of 360 Viewer with webnative AR with an AR banner. The AR banner is modified at runtime when the features are changed.

See the Pen AR Banner updated at runtime by cylindo (@cylindo) on CodePen.

 

Webnative AR with Custom styles

Example of 360 Viewer with webnative AR with Custom styles.

See the Pen V4 Custom AR styles by cylindo (@cylindo) on CodePen.

 

Without Cylindo content

Example of 360 Viewer without Cylindo content, but with custom images.

See the Pen Viewer with custom content v4 by cylindo (@cylindo) on CodePen.

 

Without full screen button

Example of 360 Viewer without full screen button.

See the Pen Viewer without fullscreen v4 by cylindo (@cylindo) on CodePen.

 

Zoom - 2K / 4K

360 HD Viewer with custom max zoom value.

See the Pen 2K_4K_ZOOM v4 by cylindo (@cylindo) on CodePen.

 

Zoom - 2K / 4K Mixed

360 HD Viewer with mixed zoom.

See the Pen MIXED_ZOOM v4 by cylindo (@cylindo) on CodePen.

 

Zoom - Alternate content

360 HD Viewer with a viewer with zoom enabled for alternate content.

See the Pen ALTERNATE_CONTENT_ZOOM v4 by cylindo (@cylindo) on CodePen.

 

Zoom - Custom container

360 HD Viewer where the zoom container is on the right side.

See the Pen Viewer with custom zoom container v4 by cylindo (@cylindo) on CodePen.


360 HD Viewer where custom zoom container overlaps the Viewer.

See the Pen Viewer with overlapping zoom v4 by cylindo (@cylindo) on CodePen.

 

Zoom - Default mode

360 HD Viewer with zoom mode property set.

See the Pen Zoom mode v4 by cylindo (@cylindo) on CodePen.

 

Zoom - Programmatic

360 HD Viewer where programmatic zoom is used.

See the Pen Programatic zoom v4 by cylindo (@cylindo) on CodePen.

 

https://codepen.io/cylindo/pen/dyGqVEG