JS Cloudimage 360 View

Docs • Demo • Code Sandbox • Video Tutorial • Why

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

Table of contents

• Demo
• Step 1: Installation
• Step 2: Initialize
• Methods
• Customize elements
• Configuration
• Controls
• Spin in X and Y axis
• Hotspots or Markers
• Cloudimage responsive integration
• Lazy loading integration
• Best practices
• Browser support
• Filerobot UI Family
• Contributing
• License

Demo

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

1<script src="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/latest/js-cloudimage-360-view.min.js?func=proxy"></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:

1<div
2   class="cloudimage-360"
3   id="gurkha-suv"
4   data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
5   data-filename-x="orange-{index}.jpg"
6   data-amount-x="73"
7></div>

Methods

init

Type: Function

Initialization of js cloudimage 360 view plugin.

1window.CI360.init();

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

1<script>window.CI360 = { notInitOnLoad: true }</script>
2<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/3.0./js-cloudimage-360-view.min.js"></script>
3<script>window.CI360.init(); // initialize the plugin when you need</script>

add

Type: Function

1window.CI360.add(idOftheView: string);

lazy init cloudimage-360 view by id.

arguments

idOftheView: string The id of the new view

update

Type: Function

1window.CI360.update(idOftheView, forceUpdate);

Update cloudimage 360 viewer instance.
For any update in source attributes after plugin initialization (e.g. data-folder, data-filename-x, data-amount-y), the plugin will re-init.

arguments

idOftheView: string The id of the new view

forceUpdate: bool Force the view to reinitialize.

1<div
2   class="cloudimage-360"
3   id="gurkha-suv"
4   data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
5   data-filename-x="orange-{index}.jpg"
6   data-amount-x="73"
7></div>

1window.CI360.update('gurkha-suv');

1window.CI360.update(null, true);

destroy

Type: Function

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

1window.CI360.destroy();

getActiveIndexByID

Type: Function

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

1window.CI360.getActiveIndexByID(idOfInstance: string, oriantation: string);

arguments

idOfInstance: string The id of the instance

oriantation: string The oriantation of the active index

Customize elements

You can customize elements by adding the following classes:

Example CSS

1.cloudimage-360-icons-container {
2	top: 5px;
3  	right: 5px;
4}
5.cloudimage-360-fullscreen-modal {
6	top: 0;
7  	bottom: 0;
8}
9.cloudimage-360-magnifier-icon {
10	background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/loupe.svg) 50% 50% / cover no-repeat;
11}
12.cloudimage-360-close-fullscreen-icon {
13	background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/cross.svg) 50% 50% / cover no-repeat;
14}
15.cloudimage-360-view-360-circle {
16  	margin: auto;
17}
18.cloudimage-360-loader {
19	margin: auto;
20}
21.cloudimage-360-view-360-icon {
22	background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/360_view.svg) 50% 50% / cover no-repeat;
23}
24.cloudimage-360-box-shadow {
25	top: 0;
26  	left: 0;
27}
28.cloudimage-360-img-magnifier-glass {
29	border: 3px solid #000;
30  	border-radius: 50%;
31}

Config

class

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-api-version (or api-version)

Type: String |Default: 'v7' | optional

Allow to use a specific version of API.

• set a specific version of API

1data-api-version="v7"

• disable API version

1data-api-version="null"

data-filename-x (or filename-x)

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-x.

data-filename-y (or filename-y)

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

The same for data-amount-x but for images set in Y-axis.

data-amount-x (or amount-x)

Type: Number | Default: 36 | optional

Amount of images to load in X-axis for 360 view .

data-amount-y (or amount-y)

Type: Number | Default: 0 | optional

Amount of images to load in Y-axis for 360 view.

data-keys (or keys)

Type: Bool | Default: false | optional

Support for 360 spin by pressing arrow keys on keyboard.

data-keys-reverse (or keys-reverse)

Type: Bool | Default: false | optional

invert arrow keys on keyboard.

data-autoplay (or autoplay)

Type: Bool | Default: false | optional

Autoplay 360 spin view on load.

data-play-once (or autoplay)

Type: Bool | Default: false | optional

stops the autoplay after one complete cycle.

data-autoplay-behavior (or autoplay-behavior)

Type: String | Default: spin-x | optional

Changing autoplay behavior

Available behaviors (spin-x, spin-y, spin-xy, spin-yx)

data-fullscreen (or fullscreen)

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 (width / height) or JSON object | Default: none | optional

ratio: string

Setting the height relative to the container width according to the provided ratio

1<div
2   class="cloudimage-360"
3   id="gurkha-suv"
4   data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
5   data-filename-x="orange-{index}.jpg"
6   data-amount-x="73"
7   data-ratio="2"
8></div>

ratio: JSON

Setting the height relative to the container width at any window size.

In the following example, the height should be 1.3 the container width at window size less than or equal to 567px and 2.22 at window size less than or equal to 768px.

1<div
2   class="cloudimage-360"
3   id="gurkha-suv"
4   data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
5   data-filename-x="orange-{index}.jpg"
6   data-amount-x="73"
7   data-ratio='{
8      "576": "1.3",
9      "768": "2.22",
10      "992": "2.23",
11      "1200": "3",
12      "2400": "3.2"
13   }'
14></div>

data-autoplay-reverse (or autoplay-reverse)

Type: Bool | Default: false | optional

Autoplay 360 spin view on load.

data-disable-drag (or disable-drag)

Type: bool | Default: false | optional

disable mouse drag.

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-x).

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-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-x).

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-x (or data-image-list-x)

Type: Array | optional

Option to add list of images in x-oriantation instead of folder , filename-x & amount-x.

example:

1data-folder="https://scaleflex.cloudimg.io/v7/demo/360-car/"
2data-image-list-x='[
3   "iris-1.jpeg",
4   "iris-4.jpeg",
5   "https://scaleflex.cloudimg.io/v7/demo/360-car/iris-12.jpeg",
6   "https://scaleflex.cloudimg.io/v7/demo/360-car/iris-15.jpeg"
7   ]’

data-image-list-y (or data-image-list-y)

Type: Array | optional

Option to add list of images in y-oriantation instead of folder , filename-y & amount-y.

example:

1data-folder="https://scaleflex.cloudimg.io/v7/demo/360-car/"
2data-image-list-y='[
3   "iris-2-y.jpeg",
4   "iris-6-y.jpeg",
5   "https://scaleflex.cloudimg.io/v7/demo/360-car/iris-8-y.jpeg",
6   "https://scaleflex.cloudimg.io/v7/demo/360-car/iris-30-y.jpeg"
7   ]’

data-pointer-zoom (or pointer-zoom)

Type: Number | Default: none | optional

Option to scale images on click on it to provided value.

example:

1data-pointer-zoom="3"

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

Controls

You can add controls by adding elements with the following classes: cloudimage-360-left, cloudimage-360-right, cloudimage-360-top, **cloudimage-360-bottom

Example CSS

1.cloudimage-360 .cloudimage-360-left, .cloudimage-360 .cloudimage-360-right {
2	padding: 8px;
3	background: rgba(255, 255, 255, 0.5);
4	border: none;
5	border-radius: 4px;
6}
7.cloudimage-360 .cloudimage-360-left:focus, .cloudimage-360 .cloudimage-360-right:focus {
8	outline: none;
9}
10.cloudimage-360 .cloudimage-360-left {
11	display: none;
12	position: absolute;
13	z-index: 100;
14	top: calc(50% - 15px);
15	left: 20px;
16}
17.cloudimage-360 .cloudimage-360-right {
18	display: none;
19	position: absolute;
20	z-index: 100;
21	top: calc(50% - 15px);
22	right: 20px;
23}
24.cloudimage-360 .cloudimage-360-left:before, .cloudimage-360 .cloudimage-360-right:before {
25	content: '';
26	display: block;
27	width: 30px;
28	height: 30px;
29	background: 50% 50% / cover no-repeat;
30}
31.cloudimage-360 .cloudimage-360-left:before {
32	background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');
33}
34.cloudimage-360 .cloudimage-360-right:before {
35	background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');
36}
37.cloudimage-360 .cloudimage-360-left.not-active, .cloudimage-360 .cloudimage-360-right.not-active {
38	opacity: 0.4;
39	cursor: default;
40}

Example HTML

1<div
2	class="cloudimage-360"
3	data-folder="https://scaleflex.cloudimg.io/v7/demo/360-car/"
4	data-filename-x="{index}.jpeg"
5>
6	<button class="cloudimage-360-left"></button>
7	<button class="cloudimage-360-right"></button>
8	<button class="cloudimage-360-top"></button>
9	<button class="cloudimage-360-bottom"></button>
10</div>

Spin in X and Y axes

We need to provide the file-name of the y-axis images using data-filename-y

Also as we did for the x-axis if we are intializing the view using data-folder and data-filename-y so we need to provide data-amount-y which indicates the number of images on the y-axis. example:

1<div
2   class="cloudimage-360"
3   data-folder="https://scaleflex.cloudimg.io/v7/demo/360-nike/"
4   data-filename-x="nike-{index}.jpg"
5   data-filename-y="nike-y-{index}.jpg"
6   data-amount-x="35"
7   data-amount-y="36"
8>
9</div>

Note: We can initilize the view in x, y axes without providing add data-folder, data-amount-y, data-amount-y.
Just we need to provide the data-amount-y

Hotspots or Markers

1const HOTSPOTS_CONFIG = [
2 {
3  positions: [
4   { imageIndex: 0, xCoord: 527, yCoord: 319 },
5   { imageIndex: 1, xCoord: 524 },
6   { imageIndex: 2, xCoord: 520 },
7   { imageIndex: 3, xCoord: 498 },
8   { imageIndex: 4, xCoord: 470 },
9   { imageIndex: 5, xCoord: 441 },
10  ]
11 }
12]

1const HOTSPOTS_CONFIG = [
2 {
3  positions,
4  variant: {
5  title: 'New Gurkha Technical Specifications',
6  url: 'https://www.forcegurkha.co.in/specifications/',
7  newTab: true
8  }
9 }
10]

1const HOTSPOTS_CONFIG = [
2 {
3  positions,
4  variant: {
5   images: [
6    { src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/AIR_SNORKEL_FINAL_JPG.png?vh=88bccb', alt: 'air snorkel' }
7   ], // optional
8   title: 'Air Intake Snorkel', // optional
9   description: 'The snorkel gives the Gurkha an unmatched water-wading ability and ensures ample supply of fresh air for combustion.', // optional
10   moreDetailsUrl: 'https://forcegurkha.co.in', // optional
11   moreDetailsTitle: 'Read more' // optional
12  }
13 }
14]

1const HOTSPOTS_CONFIG = [
2 {
3  positions,
4  variant: 'gurkha-suv'
5 }
6]

1const HOTSPOTS_CONFIG = [
2 {
3  positions,
4  variant,
5  popupProps: {
6   popupSelector: 'air-intake-popup', // optional
7   offset: [20, 5], // optional
8   arrow: false, // optional
9   placement: 'bottom' // optional
10  },
11  indicatorSelector: 'first-hotspot-icon' // optional
12 }
13]

1const HOTSPOTS_CONFIG = [
2 {
3   positions,
4   variant,
5   popupProps,
6   indicatorSelector,
7   initialDimensions: [ 1170, 662 ]
8 }
9]

1window.CI360.addHotspots(idOftheView, hotspotsConfig);

1window.CI360.addHotspots("gurkha-suv", HOTSPOTS_CONFIG);

data-responsive (or responsive)

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

Enables cloudimage responsive plugin for 360 view.

Cloudimage Responsive Integration

See how it works (article on Medium)

Requirements

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-request-responsive-images (or request-responsive-images)

Type: Bool | Default: false

Request new images on resize, based on the container width.

data-transformation (or transformation)

Type: String | Default: none | optional

Applies Cloudimage resize operations to your image, e.g. width, height, crop, face crop, rotate, prevent enlargement... Multiple transformation operations can be applied to your image, separated by "&" (Ampersand). example:

1data-transformation="w=400&h=200&func=fit"

Full documentation here.

data-filters (or filters)

Type: String | Default: none | optional

Applies Cloudimage filters to your image, e.g. brightness, contrast, greyscale, blur, Sharpen... Multiple filters can be applied, separated by "," (comma). example:

1data-filters="bright:15,contrast:30"

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

Best practices

• In order to use cloudimage responsive with 360 view, your original (master) images should be stored on a server or storage bucket (S3, Google Cloud, Azure Blob...) reachable over HTTP or HTTPS by Cloudimage. If you want to upload your master images to Cloudimage, contact us at hello@cloudimage.io.

Browser support

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

Filerobot UI Familiy

• JS Cloudimage Responsive
• React Cloudimage Responsive
• Angular Cloudimage Responsive
• Image Editor
• Uploader

Contributing!

All contributions are super welcome!

License

JS Cloudimage 360 View is provided under the MIT License