js-cloudimage-360-view 3.0.0-beta.2 → 3.0.0

package/README.md

@@ -1,15 +1,15 @@
-[![Release](https://img.shields.io/badge/release-v2.6.0-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
+
+[![Release](https://img.shields.io/badge/release-v3.0.0-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
 [![Contributions welcome](https://img.shields.io/badge/contributions-welcome-orange.svg)](#contributing)
 [![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/licenses/MIT)
-[![Scaleflex team](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg)](https://www.scaleflex.it/en/home)
+[![Scaleflex team](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg)](https://www.scaleflex.com/en/home)
 
 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Engage%20your%20customers%20with%20a%20stunning%20360%20viewvof%20your%20products&url=https://scaleflex.github.io/js-cloudimage-360-view/&via=cloudimage&hashtags=images,cloudimage)
 
 <p align="center">
-	<img
-		height="175"
-		alt="The Lounge"
-		src="https://demo.cloudimg.io/v7/https://scaleflex.airstore.io/filerobot/filerobot-cloudimage.png?sanitize=true">
+		<img
+			alt="The Lounge"
+			src="https://scaleflex.cloudimg.io/v7/cloudimage.io/LOGO+WITH+SCALEFLEX-01.png?vh=f6080d&w=350">
 </p>
 
 <h1 align="center">
@@ -31,15 +31,14 @@
 </p>
 
 A simple, interactive resource that can be used to provide a virtual tour of your product.
-
-<p align="center">
+<p align="left">
 	<img
 		alt="The Lounge"
-		src="https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/demo-chair-500.gif?sanitize=true">
+		src="https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/demo-min.gif?vh=ecac07">
 </p>
 
 powered by [Cloudimage](https://www.cloudimage.io/)
-([Watch the video here](https://www.youtube.com/watch?time_continue=2&v=JFZSE1vYb0k))
+([Watch the video here](https://www.youtube.com/watch?v=tk4j_MpqvM8))
 
 ## <a name="table_of_contents"></a>Table of contents
 
@@ -47,9 +46,10 @@ powered by [Cloudimage](https://www.cloudimage.io/)
 * [Step 1: Installation](#installation)
 * [Step 2: Initialize](#initialize)
 * [Methods](#methods)
-* [Customize Icons](#customize-icons)
+* [Customize elements](#customize-elements)
 * [Configuration](#configuration)
 * [Controls](#controls)
+* [Hotspots](#hotspots)
 * [Cloudimage responsive integration](#cloudimage-responsive-integration)
 * [Lazy loading integration](#lazy-loading)
 * [Best practices](#best-practices)
@@ -69,7 +69,7 @@ To see the Cloudimage 360 view plugin in action, please check out the
 Add script tag with CDN link to js-cloudimage-360-view lib after all content in body tag
 
 ```javascript
-<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2.6.0/js-cloudimage-360-view.min.js"></script>
+<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/3.0.0/js-cloudimage-360-view.min.js"></script>
 ```
 
 ## <a name="initialize"></a>Step 2: Initialize
@@ -80,9 +80,10 @@ After adding the js-cloudimage-360-view lib, simply initialize it with **class n
 ```html
 <div
    class="cloudimage-360"
-   data-folder="https://scaleflex.airstore.io/demo/360-car/"
-   data-filename="iris-{index}.jpeg"
-   data-amount="36"
+   id="gurkha-suv"
+   data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
+   data-filename-x="orange-{index}.jpg"
+   data-amount-x="73"
 ></div>
 ```
 
@@ -103,10 +104,54 @@ window.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
 > ```javascript
 > <script>window.CI360 = { notInitOnLoad: true }</script>
-> <script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/2/js-cloudimage-360-view.min.js"></script>
+> <script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/3.0.0/js-cloudimage-360-view.min.js"></script>
 > <script>window.CI360.init(); // initialize the plugin when you need</script>
 > ```
 
+### add
+
+###### Type: **Function**
+
+```javascript
+window.CI360.add(idOftheView: string);
+```
+lazy init cloudimage-360 view by id.
+### Properties
+#### `idOftheView`: string
+The id of the new view
+
+### update
+
+###### Type: **Function**
+```javascript
+window.CI360.update(idOftheView, forceUpdate);
+```
+Update cloudimage 360 viewer instance.<br/>
+For any update in source attributes after plugin initialization (e.g. `data-folder`, `data-filename-x`, `data-amount-y`),
+the plugin will re-init.
+### Properties
+#### `idOftheView`: string
+The id of the new view
+#### `forceUpdate`: bool
+Force the view to reinitialize.
+
+```html
+<div
+   class="cloudimage-360"
+   id="gurkha-suv"
+   data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
+   data-filename-x="orange-{index}.jpg"
+   data-amount-x="73"
+></div>
+```
+```javascript
+window.CI360.update('gurkha-suv');
+```
+
+```javascript
+window.CI360.update(null, true);
+```
+
 ### destroy
 
 ###### Type: **Function**
@@ -126,25 +171,51 @@ window.CI360.destroy();
 Get the {index} of the image that is being viewed.
 
 ```javascript
-window.CI360.getActiveIndexByID('id_of_product');
+window.CI360.getActiveIndexByID(idOfInstance: string, oriantation: string);
 ```
-## <a name="customize-icons"></a> Customize icons
+### Properties
+#### `idOfInstance`: string
+The id of the instance
+
+#### `oriantation`: string
+The oriantation of the active index
+
+## <a name="customize-elements"></a> Customize elements
 
-You can customize the icons by adding the following classes:
+You can customize elements by adding the following classes:
 
 ### Example CSS
 ```css
-.cloudimage-360 .fullscreen-icon {
-	background: url(https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/full_screen.svg) 50% 50% / cover no-repeat;
+.cloudimage-360-icons-container {
+	top: 5px;
+  	right: 5px;
 }
-.cloudimage-360 .magnify-icon {
+.cloudimage-360-fullscreen-modal {
+	top: 0;
+  	bottom: 0;
+}
+.cloudimage-360-magnifier-icon {
 	background: url(https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/loupe.svg) 50% 50% / cover no-repeat;
 }
-.cloudimage-360 .close-fullscreen-icon {
+.cloudimage-360-close-fullscreen-icon {
 	background: url(https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/cross.svg) 50% 50% / cover no-repeat;
 }
-.cloudimage-360 .reset-zoom-icon {
-	background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/ic-resize.svg?vh=248986) 50% 50% / cover no-repeat;
+.cloudimage-360-view-360-circle {
+  	margin: auto;
+}
+.cloudimage-360-loader {
+	margin: auto;
+}
+.cloudimage-360-view-360-icon {
+	background: url(hhttps://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/360_view.svg) 50% 50% / cover no-repeat;
+}
+.cloudimage-360-box-shadow {
+	top: 0;
+  	left: 0;
+}
+.cloudimage-360-img-magnifier-glass {
+	border: 3px solid #000;
+  	border-radius: 50%;
 }
 ```
 
@@ -161,24 +232,35 @@ The selector for js-cloudimage-360-view lib.
 ###### Type: **String(url)** | _required_
 
 Your images folder on server.
+### data-api-version (or api-version)
 
-### data-filename (or filename)
+###### Type: **String** |Default: **'v7'** | _optional_
+
+Allow to use a specific version of API.
+
+- set a specific version of API
+```javascript
+data-api-version="v7"
+```
+- disable API version
+```javascript
+data-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](#data-amount).
+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-amount-x).
 
 ### data-filename-y (or filename-y)
 
 ###### Type: **String** | Default: **image-y-{index}.jpg** | _optional_
+The same for [data-amount-x](#data-amount-x) but for images set in Y-axis.
 
-The filename pattern for Y-axis images.  Must include {index}, which the library will replace with a number between 1 and [data-amount-y](#data-amount-y).
-
-### <a name="data-amount"></a> data-amount (or amount)
-
+### <a name="data-amount-x"></a> data-amount-x (or amount-x)
 ###### Type: **Number** | Default: **36** | _optional_
 
-Amount of images to load for 360 view.
+Amount of images to load in X-axis for 360 view .
 
 ### <a name="data-amount-y"></a> data-amount-y (or amount-y)
 
@@ -192,12 +274,24 @@ Amount of images to load in Y-axis for 360 view.
 
 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_
@@ -206,8 +300,7 @@ Changing autoplay behavior
 
 Available behaviors (spin-x, spin-y, spin-xy, spin-yx)
 
-### data-full-screen (or full-screen)
-
+### data-fullscreen (or fullscreen)
 ###### Type: **Bool** | Default: **false** | _optional_
 
 Open 360 spin view in full screen modal.
@@ -218,17 +311,46 @@ Open 360 spin view in full screen modal.
 
 Magnifier to zoom image.
 
-### data-magnifier-in-fullscreen (or magnifier-in-fullscreen)
-
-###### Type: **bool** | Default: **false** | _optional_
+### data-ratio (or ratio)
+###### Type: **Number** (width / height) or JSON object | Default: **none** | _optional_
+#### `ratio`: string
 
-enable magnifier in fullscreen modal.
+Setting the height relative to the container width according to the provided ratio</br>
 
-### data-ratio (or ratio)
+```html
+<div
+   class="cloudimage-360"
+   id="gurkha-suv"
+   data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
+   data-filename-x="orange-{index}.jpg"
+   data-amount-x="73"
+   data-ratio="2"
+></div>
+```
+<a href="https://codesandbox.io/s/js-cloudimage-360-view-g4wyt1?file=/index.html"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
+#### `ratio`: JSON
+Setting the height relative to the container width at any window size.
 
-###### Type: **Number** (height / width) | Default: **none** | _optional_
+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.
 
-Prevents page from jumping.
+```html
+<div
+   class="cloudimage-360"
+   id="gurkha-suv"
+   data-folder="https://scaleflex.cloudimg.io/v7/demo/suv-orange-car-360/"
+   data-filename-x="orange-{index}.jpg"
+   data-amount-x="73"
+   data-ratio='{
+      "576": "1.3",
+      "768": "2.22",
+      "992": "2.23",
+      "1200": "3",
+      "2400": "3.2"
+   }'
+></div>
+```
+<a href="https://codesandbox.io/s/js-cloudimage-360-view-5tssb7?file=/index.html"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
 
 ### data-autoplay-reverse (or autoplay-reverse)
 
@@ -236,6 +358,12 @@ Prevents page from jumping.
 
 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_
@@ -252,7 +380,7 @@ Speed Factor of changing frames on drag event.
 
 ###### Type: **Bool** | Default: **false** | _optional_
 
-Spin direction, by default it uses counterclockwise (image indexes from 1 to data-amount).
+Spin direction, by default it uses counterclockwise (image indexes from 1 to data-amount-x).
 
 ### data-box-shadow (or box-shadow)
 
@@ -272,17 +400,11 @@ Display 360 view line at the bottom of container.
 
 Hide 360 view icon.
 
-### data-logo-src (or logo-src)
-
-###### Type: **String** | Default: **https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/360_view.svg** | _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).
+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)
 
@@ -302,17 +424,16 @@ Bottom offset for 360 view line.
 
 Left zero padding on filename. For example: index-zero-base="4" => image index will be "0004"
 
-### data-image-list (or image-list)
-
+### data-image-list-x (or data-image-list-x)
 ###### Type: **Array** | _optional_
 
-Option to add list of images instead of `folder` & `filename`.
+Option to add list of images in x-oriantation instead of `folder` , `filename-x` & `amount-x`.
 
 example:
 
 ```javascript
 data-folder="https://scaleflex.airstore.io/demo/360-car/"
-data-image-list='[
+data-image-list-x='[
    "iris-1.jpeg",
    "iris-4.jpeg",
    "https://scaleflex.airstore.io/demo/360-car/iris-12.jpeg",
@@ -320,56 +441,40 @@ data-image-list='[
    ]’
 ```
 
-### 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](#lazy-loading)
-### data-disable-pointer-zoom (or disable-pointer-zoom)
-
-###### Type: **bool** | Default: **false** | _optional_
-
-Disable pointer zoom on desktop
-
-### data-disable-pinch-zoom (or disable-pinch-zoom)
-
-###### Type: **bool** | Default: **false** | _optional_
-
-Disable pinch zoom on mobile
-### data-to-start-pointer-zoom (or to-start-pointer-zoom)
+### data-image-list-y (or data-image-list-y)
 
-###### Type: **string** | Default: **scroll** | _optional_
-
-Events to start pointer zoom
-
-Available events (scroll, click)
-
-### data-on-mouse-leave (or on-mouse-leave)
-
-###### Type: **string** | Default: **none** | _optional_
-
-Functions called after mouse leave the container
+###### Type: **Array** | _optional_
 
-Available functions (resetZoom)
+Option to add list of images in y-oriantation instead of `folder` , `filename-y` & `amount-y`.
 
-Multiple functions can be applied, separated by "," (comma)
+example:
 
-### data-pointer-zoom-factor (or pointer-zoom-factor)
+```javascript
+data-folder="https://scaleflex.airstore.io/demo/360-car/"
+data-image-list-y='[
+   "iris-2-y.jpeg",
+   "iris-6-y.jpeg",
+   "https://scaleflex.airstore.io/demo/360-car/iris-8-y.jpeg",
+   "https://scaleflex.airstore.io/demo/360-car/iris-30-y.jpeg"
+   ]’
+```
+### data-pointer-zoom (or pointer-zoom)
 
-###### Type: **Number** | Default: **2** | _optional_
+###### Type: **Number** | Default: **none** | _optional_
 
-Pointer zoom scaling factor
-### data-pinch-zoom-factor (or pinch-zoom-factor)
+Option to scale images on click on it to provided value.
 
-###### Type: **Number** | Default: **2** | _optional_
+example:
 
-Pinch zoom scaling factor
+```javascript
+data-pointer-zoom="3"
+```
 
-### data-max-scale (or max-scale)
+### data-lazyload (or lazyload)
 
-###### Type: **Number** | Default: **none** | _optional_
+###### Type: **Bool** | Default: **false** | _optional_
 
-Maximum scale that images can be resize to it with pointer or pinch zoom
+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](#lazy-loading)
 ### data-lazyload-selector (or lazyload-selector)
 
 ###### Type: **String** | Default: **lazyload** | _optional_
@@ -379,47 +484,47 @@ Helper class to apply lazy-loading depending on library you choose, see [Lazy lo
 
 ## <a name="controls"></a> Controls
 
-You can add controls by adding elements with the following classes: **cloudimage-360-prev**, **cloudimage-360-next**, **cloudimage-360-top**, **cloudimage-360-bottom**
+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
 ```css
-.cloudimage-360 .cloudimage-360-prev, .cloudimage-360 .cloudimage-360-next {
+.cloudimage-360 .cloudimage-360-left, .cloudimage-360 .cloudimage-360-right {
 	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 {
+.cloudimage-360 .cloudimage-360-left:focus, .cloudimage-360 .cloudimage-360-right:focus {
 	outline: none;
 }
-.cloudimage-360 .cloudimage-360-prev {
+.cloudimage-360 .cloudimage-360-left {
 	display: none;
 	position: absolute;
 	z-index: 100;
 	top: calc(50% - 15px);
 	left: 20px;
 }
-.cloudimage-360 .cloudimage-360-next {
+.cloudimage-360 .cloudimage-360-right {
 	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 {
+.cloudimage-360 .cloudimage-360-left:before, .cloudimage-360 .cloudimage-360-right:before {
 	content: '';
 	display: block;
 	width: 30px;
 	height: 30px;
 	background: 50% 50% / cover no-repeat;
 }
-.cloudimage-360 .cloudimage-360-prev:before {
+.cloudimage-360 .cloudimage-360-left:before {
 	background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-left.svg');
 }
-.cloudimage-360 .cloudimage-360-next:before {
+.cloudimage-360 .cloudimage-360-right:before {
 	background-image: url('https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/assets/img/arrow-right.svg');
 }
-.cloudimage-360 .cloudimage-360-prev.not-active, .cloudimage-360 .cloudimage-360-next.not-active {
+.cloudimage-360 .cloudimage-360-left.not-active, .cloudimage-360 .cloudimage-360-right.not-active {
 	opacity: 0.4;
 	cursor: default;
 }
@@ -429,16 +534,167 @@ You can add controls by adding elements with the following classes: **cloudimage
 <div
 	class="cloudimage-360"
 	data-folder="https://scaleflex.airstore.io/demo/indoor/"
-	data-filename="{index}.jpeg"
+	data-filename-x="{index}.jpeg"
 >
-	<button class="cloudimage-360-prev"></button>
-	<button class="cloudimage-360-next"></button>
+	<button class="cloudimage-360-left"></button>
+	<button class="cloudimage-360-right"></button>
 	<button class="cloudimage-360-top"></button>
 	<button class="cloudimage-360-bottom"></button>
 </div>
 ```
 
 <a href="https://codesandbox.io/s/js-cloudimage-360-view-361eb?fontsize=14"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
+## <a name="hotspots"/> Hotspots or Markers
+Display information about the product on specific areas. Once a hotspot is created it can be used on more than one image.
+### Requirements
+First, we need to set `data-hotspots` attribute to the view we want to add hotspots or markers on it, to prevent the plugin to init the view without hotspots config.
+Also we need to set an `id` attribute, we will need it to link the view with the hotspots config.
+
+### Create hotspots configuration
+The hotspots config should be an array of objects, each object in the array indicates a single hotspot config.
+For each item in the array, we need to set the positions (X-coord and Y-coord) of the hotspot at every image index we need to show the hotspot on it. <br>hint: To know the current image index we will need to set `data-info="white || black"` attribute.
+
+example:
+
+```js
+const HOTSPOTS_CONFIG = [
+ {
+  positions: [
+   { imageIndex: 0, xCoord: 527, yCoord: 319 },
+   { imageIndex: 1, xCoord: 524 },
+   { imageIndex: 2, xCoord: 520 },
+   { imageIndex: 3, xCoord: 498 },
+   { imageIndex: 4, xCoord: 470 },
+   { imageIndex: 5, xCoord: 441 },
+  ]
+ }
+]
+```
+In the previous example, we have only set the Ycoord a single time at the image index 0.
+So if the coord didn't change there's no need to reset it, it will already take the previous value.
+
+Now we need to set the hotspot variant, we have three types of hotspots (link, popup, and custom), as it will be explained below.
+## Variant
+### Link
+we need to provide the URL of the link and the link title.
+
+example:
+
+```js
+const HOTSPOTS_CONFIG = [
+ {
+  positions,
+  variant: {
+  title: 'New Gurkha Technical Specifications',
+  url: 'https://www.forcegurkha.co.in/specifications/',
+  newTab: true
+  }
+ }
+]
+```
+---
+### Popup
+Only the property inserted will displayed.
+| Property  |Type | Default | Description |
+| ------------- | ------------- | ------------- |------------- |
+| images  | Array| [] | To display a carousel of images we need an array of objects, each object should include the src and the alt of each image  |
+| title  |String| null | Display title underneath the images  |
+| description| String | null | Display description underneath the title  |
+| moreDetailsUrl | String | null | Display a button underneath the description to navigate to a provided URL |
+| moreDetailsTitle  | String | null| Set the title of the more details button  |
+
+   example:
+```js
+const HOTSPOTS_CONFIG = [
+ {
+  positions,
+  variant: {
+   images: [
+    { src: 'https://scaleflex.cloudimg.io/v7/demo/360-assets/AIR_SNORKEL_FINAL_JPG.png?vh=88bccb', alt: 'air snorkel' }
+   ], // optional
+   title: 'Air Intake Snorkel', // optional
+   description: 'The snorkel gives the Gurkha an unmatched water-wading ability and ensures ample supply of fresh air for combustion.', // optional
+   moreDetailsUrl: 'https://forcegurkha.co.in', // optional
+   moreDetailsTitle: 'Read more' // optional
+  }
+ }
+]
+```
+---
+### Custom
+Display any element in the DOM in a popup and link it with the hotspot.</br>
+We will need to set the variant property value to the id of the element.
+
+example:
+```js
+const HOTSPOTS_CONFIG = [
+ {
+  positions,
+  variant: 'gurkha-suv'
+ }
+]
+```
+## PopupProps
+Options to customize the hotspot popup.
+### Properties
+| Property  | Type | Defaullt |Description |
+| ------------- | ------------- | ------------- | ------------- |
+| popupSelector |String| null |Set className to the popup wrapper  |
+| open |Boolean | false |Open the popup  |
+| arrow |Boolean| true |Dipslay an arrow that points toward the hotspot element|
+| offset|Array | [0, 0] |Set a distance between the hotspot element and the popup  |
+| placement|String| Auto|- we can adjust the position of the hotspot popup relative to the hotspot element. (top - bottom - left - right)|
+
+
+example:
+```js
+const HOTSPOTS_CONFIG = [
+ {
+  positions,
+  variant,
+  popupProps: {
+   popupSelector: 'air-intake-popup', // optional
+   offset: [20, 5], // optional
+   arrow: false, // optional
+   placement: 'bottom' // optional
+  },
+  indicatorSelector: 'first-hotspot-icon' // optional
+ }
+]
+```
+## Responsive hotspots
+Now we need to make our hotspots responsive to have an accurate positioning in different screens.
+we have to set `initialDimensions` property to every hotspot config. which indicates the dimension of the cloudimage-360 view.<br/>
+hint: `data-info` can be used to get view size.
+
+example:
+```js
+const HOTSPOTS_CONFIG = [
+ {
+   positions,
+   variant,
+   popupProps,
+   indicatorSelector,
+   initialDimensions: [ 1170, 662 ]
+ }
+]
+```
+## Add Hotspots
+we need this function to link the created config with the 360-view.
+```js
+window.CI360.addHotspots(idOftheView, hotspotsConfig);
+```
+example:
+```js
+window.CI360.addHotspots("gurkha-suv", HOTSPOTS_CONFIG);
+```
+<a href="https://codesandbox.io/s/competent-bogdan-49b0u6?file=/index.html"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
+
+### data-responsive (or responsive)
+
+###### Type: **String** (Cloudimage token) | Default: **none** | _required for cloudimage responsive plugin_
+
+Enables cloudimage responsive plugin for 360 view.
 
 ## <a name="cloudimage-responsive-integration"/> Cloudimage Responsive Integration
 
@@ -497,27 +753,6 @@ Lazy loading is not included into js-cloudimage-360-view by default. There are w
 
 [Implementation example with lozad.js](https://codesandbox.io/s/0185934m8p?fontsize=14)
 
-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
-
-```javascript
-<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.lazysizes.min.js"></script>
-```
-
-CDN link to js-cloudimage-360-view 1.1.0 + yall.js 3.1.1
-
-```javascript
-<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.yall.min.js"></script>
-```
-
-CDN link to js-cloudimage-360-view 1.1.0 + lozad.js 1.9.0
-
-```javascript
-<script src="https://cdn.scaleflex.it/filerobot/js-cloudimage-360-view/v2.0.0.lozad.min.js"></script>
-```
-
-
 ## <a name="best-practices"/> Best practices
 
 * In order to use cloudimage responsive with 360 view, your original (master) images should be stored on a server
@@ -543,5 +778,4 @@ Tested in all modern browsers and IE 11, 10, 9.
 All contributions are super welcome!
 
 ## <a name="license"></a>License
-JS Cloudimage 360 View is provided under the [MIT License](https://opensource.org/licenses/MIT)
-
+JS Cloudimage 360 View is provided under the [MIT License](https://opensource.org/licenses/MIT)