Skip to content
Switch branches/tags


Failed to load latest commit information.

Release Contributions welcome License Scaleflex team


The Lounge

JS Cloudimage 360 View

DocsDemoCode SandboxVideo TutorialWhy

A simple, interactive resource that can be used to provide a virtual tour of your product.

The Lounge

powered by Cloudimage (Watch the video here)

Table of contents


To see the Cloudimage 360 view plugin in action, please check out the Demo page.

Step 1: Installation

Add script tag with CDN link to js-cloudimage-360-view lib after all content in body tag

<script src=""></script>

Step 2: Initialize

After adding the js-cloudimage-360-view lib, simply initialize it with class name "cloudimage-360", server folder path, file name and amount of images:


edit in codesandbox



Type: Function

Initialization of js cloudimage 360 view plugin.


NOTE: initialization of the plugin runs on the script load. In case you need to postpone the initialization of the plugin you can disable it with notInitOnLoad param

<script>window.CI360 = { notInitOnLoad: true }</script>
<script src=""></script>
<script>window.CI360.init(); // initialize the plugin when you need</script>


Type: Function

Destroying a cloudimage 360 viewer instance will reset the HTML to its original state.

edit in codesandbox


Type: Function

Get the {index} of the image that is being viewed.




Type: String | Value: "cloudimage-360" | required

The selector for js-cloudimage-360-view lib.

data-folder (or folder)

Type: String(url) | required

Your images folder on server.

data-filename (or filename)

Type: String | Default: image-{index}.jpg | optional

The filename pattern for your 360 image. Must include {index}, which the library will replace with a number between 1 and data-amount.

data-amount (or amount)

Type: Number | Default: 36 | optional

Amount of images to load for 360 view.

data-keys (or keys)

Type: Bool | Default: false | optional

Support for 360 spin by pressing arrow keys on keyboard.

data-autoplay (or autoplay)

Type: Bool | Default: false | optional

Autoplay 360 spin view on load.

data-full-screen (or full-screen)

Type: Bool | Default: false | optional

Open 360 spin view in full screen modal.

data-magnifier (or magnifier)

Type: Number | Default: none | optional

Magnifier to zoom image.

data-ratio (or ratio)

Type: Number (height / width) | Default: none | optional

Prevents page from jumping.

data-autoplay-reverse (or autoplay-reverse)

Type: Bool | Default: false | optional

Autoplay 360 spin view on load.

data-speed (or speed)

Type: Number | Default: 150 | optional

Speed of changing frames for autoplay in milliseconds.

data-drag-speed (or drag-speed)

Type: Number | Default: 150 | optional

Speed Factor of changing frames on drag event.

data-spin-reverse (or spin-reverse)

Type: Bool | Default: false | optional

Spin direction, by default it uses counterclockwise (image indexes from 1 to data-amount).

data-box-shadow (or box-shadow)

Type: String (e.g. data-box-shadow="inset 0 0 100px #222") | Default: none | optional

Apply box shadow for container.

data-bottom-circle (or bottom-circle)

Type: Bool | Default: false | optional

Display 360 view line at the bottom of container.

data-hide-360-logo (or hide-360-logo)

Type: Bool | Default: false | optional

Hide 360 view icon.

data-logo-src (or logo-src)

Type: String | Default: | optional

URL of asset to use as the 360 view icon.

data-control-reverse (or control-reverse)

Type: Bool | Default: false | optional

Spin direction using controls, by default it uses counterclockwise (image indexes from 1 to data-amount).

data-stop-at-edges (or stop-at-edges)

Type: Bool | Default: false | optional

Blocks repeating images after reaching last image (or first image in opposite direction)

data-bottom-circle-offset (or bottom-circle-offset)

Type: Number | Default: 5 | optional

Bottom offset for 360 view line.

data-index-zero-base (or index-zero-base)

Type: Number | optional

Left zero padding on filename. For example: index-zero-base="4" => image index will be "0004"

data-image-list (or image-list)

Type: Array | optional

Option to add list of images instead of folder & filename.



data-lazyload (or lazyload)

Type: Bool | Default: false | optional

Only 360 view images close to the client's viewport will be loaded, hence accelerating the page loading time. If set to true, an additional script must be included, see Lazy loading

data-lazyload-selector (or lazyload-selector)

Type: String | Default: lazyload | optional

Helper class to apply lazy-loading depending on library you choose, see Lazy loading


You can add controls by adding elements with the following classes: cloudimage-360-prev, cloudimage-360-next

Example CSS

.cloudimage-360 .cloudimage-360-prev, .cloudimage-360 .cloudimage-360-next {
	padding: 8px;
	background: rgba(255, 255, 255, 0.5);
	border: none;
	border-radius: 4px;
.cloudimage-360 .cloudimage-360-prev:focus, .cloudimage-360 .cloudimage-360-next:focus {
	outline: none;
.cloudimage-360 .cloudimage-360-prev {
	display: none;
	position: absolute;
	z-index: 100;
	top: calc(50% - 15px);
	left: 20px;
.cloudimage-360 .cloudimage-360-next {
	display: none;
	position: absolute;
	z-index: 100;
	top: calc(50% - 15px);
	right: 20px;
.cloudimage-360 .cloudimage-360-prev:before, .cloudimage-360 .cloudimage-360-next:before {
	content: '';
	display: block;
	width: 30px;
	height: 30px;
	background: 50% 50% / cover no-repeat;
.cloudimage-360 .cloudimage-360-prev:before {
	background-image: url('');
.cloudimage-360 .cloudimage-360-next:before {
	background-image: url('');
.cloudimage-360 .cloudimage-360-prev.not-active, .cloudimage-360 .cloudimage-360-next.not-active {
	opacity: 0.4;
	cursor: default;

Example HTML

	<button class="cloudimage-360-prev"></button>
	<button class="cloudimage-360-next"></button>

edit in codesandbox

Cloudimage Responsive Integration

See how it works (article on Medium)


To use the Cloudimage Responsive plugin, you will need a Cloudimage token to deliver your images over CDN. Don't worry, it only takes seconds to get one by registering here. Once your token is created, you can configure it as described below. This token allows you to use 25GB of image cache and 25GB of worldwide CDN traffic per month for free.

data-responsive (or responsive)

Type: String (Cloudimage token) | Default: none | required for cloudimage responsive plugin

Enables cloudimage responsive plugin for 360 view.

data-filters (or filters)

Type: String | Default: q35 | optional

Applies default Cloudimage filters to your image, e.g. fcontrast, fpixelate, fgaussian, backtransparent, rotation... Multiple filters can be applied, separated by "." (dot).

Full documentation here.

Lazy Loading

Lazy loading is not included into js-cloudimage-360-view by default. There are well thought libraries to achieve that. If you enable lazy loading in the configuration, you need to add an additional library like lazysizes, yall.js (Yet Another Lazy Loader), lozad.js to handle it.

Implementation example with lazysizes

Implementation example with yall.js

Implementation example with lozad.js

to save API calls you man want to use one of our cdn bundles:

CDN link to js-cloudimage-360-view 1.1.0 + lazysizes 4.1.7

<script src=""></script>

CDN link to js-cloudimage-360-view 1.1.0 + yall.js 3.1.1

<script src=""></script>

CDN link to js-cloudimage-360-view 1.1.0 + lozad.js 1.9.0

<script src=""></script>

Best practices

Browser support

Tested in all modern browsers and IE 11, 10, 9.

Filerobot UI Familiy


All contributions are super welcome!


JS Cloudimage 360 View is provided under the MIT License


Engage your customers with a stunning 360 view of your products. Any questions or issues, please report to




No packages published