js-cloudimage-360-view 3.0.0 → 3.0.3

package/CHANGELOG.md

@@ -14,7 +14,7 @@ Types of changes:
 
 > Date format: YYYY-MM-DD
 
-> If we have some "Breaking changes" we can mark it in message by `**BREAKING**` preffix, like:  
+> If we have some "Breaking changes" we can mark it in message by `**BREAKING**` preffix, like:
 > `- **BREAKING**: Some message`
 
 -------------
@@ -25,11 +25,26 @@ Types of changes:
 - ...
 
 -------------
+## 3.0.3 - 2022-05-04
+### Fixed
+- Error on loading original images from image list
+
+## 3.0.2 - 2022-05-04
+### Changed
+- documentation
+
+## 3.0.1 - 2022-03-28
+### Changed
+- hotspots icons
+
+### Fixed
+- loader is hidden if hide-360-logo is active
+
 ## 3.0.0 - 2022-03-25
 ### Added
-- possiblity to add makers or hotspots to each image
-- possiblity add views after init the plugin
-- possiblity to update views
+- possibility to add makers or hotspots to each image
+- possibility add views after init the plugin
+- possibility to update views
 ### Fixed
 - hide 360 logo after play once
 

package/README.md

@@ -1,14 +1,14 @@
-
-[![Release](https://img.shields.io/badge/release-v3.0.0-blue.svg)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
+[![Release](https://img.shields.io/github/v/release/scaleflex/js-cloudimage-360-view)](https://github.com/scaleflex/js-cloudimage-360-view/releases)
+[![Size](https://img.shields.io/bundlephobia/min/js-cloudimage-360-view)](https://img.shields.io/bundlephobia/min/js-cloudimage-360-view)
+[![Download](https://img.shields.io/npm/dt/js-cloudimage-360-view?logoColor=orange)](https://img.shields.io/npm/dt/js-cloudimage-360-view?logoColor=orange)
 [![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.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)
+[![Scaleflex team](https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20-Scaleflex%20team-6986fa.svg)](https://www.scaleflex.com/en/home)
+[![Cloudimage](https://img.shields.io/badge/Powered%20by-cloudimage-blue)](https://www.cloudimage.io/en/home)
 
 <p align="center">
 		<img
-			alt="The Lounge"
+			alt="cloudimage logo"
 			src="https://scaleflex.cloudimg.io/v7/cloudimage.io/LOGO+WITH+SCALEFLEX-01.png?vh=f6080d&w=350">
 </p>
 
@@ -22,24 +22,20 @@
 		•
 		<a href="https://scaleflex.github.io/js-cloudimage-360-view/" target="_blank">Demo</a>
 		•
-		<a href="https://codesandbox.io/s/6479n17j73?fontsize=14&module=%2Findex.html" target="_blank">Code Sandbox</a>
+		<a href="https://codesandbox.io/s/js-cloudimage-360-view-examples-npne18" target="_blank">Code Sandbox</a>
 		•
 		<a href="https://youtu.be/zXUgrvZ7FMc" target="_blank">Video Tutorial</a>
 		•
 		<a href="https://medium.com/cloudimage/e-merchandising-how-can-a-360-view-of-your-products-boost-your-revenue-24b16eb9cd62" target="_blank">Why</a>
 	</strong>
 </p>
-
-A simple, interactive resource that can be used to provide a virtual tour of your product.
-<p align="left">
+<p align="center">A simple, interactive resource that can be used to provide a virtual tour of your product.</p>
+<p align="center">
 	<img
 		alt="The Lounge"
-		src="https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/demo-min.gif?vh=ecac07">
+		src="https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/demos/assets/a2.gif">
 </p>
 
-powered by [Cloudimage](https://www.cloudimage.io/)
-([Watch the video here](https://www.youtube.com/watch?v=tk4j_MpqvM8))
-
 ## <a name="table_of_contents"></a>Table of contents
 
 * [Demo](#demo)
@@ -49,6 +45,7 @@ powered by [Cloudimage](https://www.cloudimage.io/)
 * [Customize elements](#customize-elements)
 * [Configuration](#configuration)
 * [Controls](#controls)
+* [Spin in X and Y axis](#spin_x_y)
 * [Hotspots](#hotspots)
 * [Cloudimage responsive integration](#cloudimage-responsive-integration)
 * [Lazy loading integration](#lazy-loading)
@@ -69,7 +66,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/3.0.0/js-cloudimage-360-view.min.js"></script>
+<script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/3.0.3/js-cloudimage-360-view.min.js"></script>
 ```
 
 ## <a name="initialize"></a>Step 2: Initialize
@@ -87,7 +84,7 @@ After adding the js-cloudimage-360-view lib, simply initialize it with **class n
 ></div>
 ```
 
-<a href="https://codesandbox.io/s/6479n17j73?fontsize=14&module=%2Findex.html"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
+<a href="https://codesandbox.io/s/js-cloudimage-360-view-example-l7ce4h"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
 
 ## <a name="methods"></a> Methods
 
@@ -104,7 +101,7 @@ 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/3.0.0/js-cloudimage-360-view.min.js"></script>
+> <script src="https://cdn.scaleflex.it/plugins/js-cloudimage-360-view/3.0./js-cloudimage-360-view.min.js"></script>
 > <script>window.CI360.init(); // initialize the plugin when you need</script>
 > ```
 
@@ -120,6 +117,8 @@ lazy init cloudimage-360 view by id.
 #### `idOftheView`: string
 The id of the new view
 
+<a href="https://codesandbox.io/s/js-cloudimage-360-view-examples-vxlmoi"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
+
 ### update
 
 ###### Type: **Function**
@@ -152,6 +151,8 @@ window.CI360.update('gurkha-suv');
 window.CI360.update(null, true);
 ```
 
+<a href="https://codesandbox.io/s/js-cloudimage-360-view-examples-n7m04e"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
+
 ### destroy
 
 ###### Type: **Function**
@@ -161,7 +162,7 @@ Destroying a cloudimage 360 viewer instance will reset the HTML to its original
 ```javascript
 window.CI360.destroy();
 ```
-<a href="https://codesandbox.io/s/js-cloudimage-360-view-initdestroy-y1il9">
+<a href="https://codesandbox.io/s/js-cloudimage-360-view-examples-03pb2t">
 	<img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
 
 ### getActiveIndexByID
@@ -195,10 +196,10 @@ You can customize elements by adding the following classes:
   	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;
+	background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/loupe.svg) 50% 50% / cover no-repeat;
 }
 .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;
+	background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/cross.svg) 50% 50% / cover no-repeat;
 }
 .cloudimage-360-view-360-circle {
   	margin: auto;
@@ -207,7 +208,7 @@ You can customize elements by adding the following classes:
 	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;
+	background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/360_view.svg) 50% 50% / cover no-repeat;
 }
 .cloudimage-360-box-shadow {
 	top: 0;
@@ -257,12 +258,12 @@ The filename pattern for your 360 image. Must include {index}, which the library
 ###### Type: **String** | Default: **image-y-{index}.jpg** | _optional_
 The same for [data-amount-x](#data-amount-x) but for images set in Y-axis.
 
-### <a name="data-amount-x"></a> data-amount-x (or amount-x)
+### data-amount-x (or amount-x)
 ###### Type: **Number** | Default: **36** | _optional_
 
 Amount of images to load in X-axis for 360 view .
 
-### <a name="data-amount-y"></a> data-amount-y (or amount-y)
+### data-amount-y (or amount-y)
 
 ###### Type: **Number** | Default: **0** | _optional_
 
@@ -327,7 +328,7 @@ Setting the height relative to the container width according to the provided rat
    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>
+<a href="https://codesandbox.io/s/js-cloudimage-360-view-examples-865iz5"><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.
 
@@ -350,7 +351,7 @@ and 2.22 at window size less than or equal to 768px.
    }'
 ></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>
+<a href="https://codesandbox.io/s/js-cloudimage-360-view-examples-xzx8no"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
 
 ### data-autoplay-reverse (or autoplay-reverse)
 
@@ -432,12 +433,12 @@ Option to add list of images in x-oriantation instead of `folder` , `filename-x`
 example:
 
 ```javascript
-data-folder="https://scaleflex.airstore.io/demo/360-car/"
+data-folder="https://scaleflex.cloudimg.io/v7/demo/360-car/"
 data-image-list-x='[
    "iris-1.jpeg",
    "iris-4.jpeg",
-   "https://scaleflex.airstore.io/demo/360-car/iris-12.jpeg",
-   "https://scaleflex.airstore.io/demo/360-car/iris-15.jpeg"
+   "https://scaleflex.cloudimg.io/v7/demo/360-car/iris-12.jpeg",
+   "https://scaleflex.cloudimg.io/v7/demo/360-car/iris-15.jpeg"
    ]’
 ```
 
@@ -450,12 +451,12 @@ Option to add list of images in y-oriantation instead of `folder` , `filename-y`
 example:
 
 ```javascript
-data-folder="https://scaleflex.airstore.io/demo/360-car/"
+data-folder="https://scaleflex.cloudimg.io/v7/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"
+   "https://scaleflex.cloudimg.io/v7/demo/360-car/iris-8-y.jpeg",
+   "https://scaleflex.cloudimg.io/v7/demo/360-car/iris-30-y.jpeg"
    ]’
 ```
 ### data-pointer-zoom (or pointer-zoom)
@@ -484,7 +485,7 @@ 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-left**, **cloudimage-360-right**, **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
@@ -533,7 +534,7 @@ You can add controls by adding elements with the following classes: **cloudimage
 ```html
 <div
 	class="cloudimage-360"
-	data-folder="https://scaleflex.airstore.io/demo/indoor/"
+	data-folder="https://scaleflex.cloudimg.io/v7/demo/360-car/"
 	data-filename-x="{index}.jpeg"
 >
 	<button class="cloudimage-360-left"></button>
@@ -543,7 +544,31 @@ You can add controls by adding elements with the following classes: **cloudimage
 </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 href="https://codesandbox.io/s/js-cloudimage-360-view-examples-npne18"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
+
+## <a name="spin_x_y"/> Spin in X and Y axes
+Allow the view to spin in both X, Y axes
+### Requirements
+We need to provide the `file-name` of the y-axis images using <a href="#data-filename-y-or-filename-y">data-filename-y</a>
+
+Also as we did for the x-axis if we are intializing the view using <a href="#data-folder-or-folder">data-folder</a> and <a href="#data-filename-y-or-filename-y">data-filename-y</a>
+so we need to provide <a href="#data-amount-y-or-amount-y">data-amount-y</a> which indicates the number of images on the y-axis.
+example:
+
+```javascript
+<div
+   class="cloudimage-360"
+   data-folder="https://scaleflex.cloudimg.io/v7/demo/360-nike/"
+   data-filename-x="nike-{index}.jpg"
+   data-filename-y="nike-y-{index}.jpg"
+   data-amount-x="35"
+   data-amount-y="36"
+>
+</div>
+```
+<a href="https://codesandbox.io/s/js-cloudimage-360-view-wc9j12?file=/index.html"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a></br>
+> Note: We can initilize the view in x, y axes without providing add `data-folder`, `data-amount-y`, `data-amount-y`.</br>
+Just we need to provide the <a href="#data-amount-y-or-amount-y">data-amount-y</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
@@ -688,7 +713,7 @@ 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>
+<a href="https://codesandbox.io/s/competent-bogdan-49b0u6"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="edit in codesandbox"/></a>
 
 ### data-responsive (or responsive)
 
@@ -747,11 +772,11 @@ data-filters="bright:15,contrast:30"
 
 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](https://github.com/aFarkas/lazysizes), [yall.js (Yet Another Lazy Loader)](https://github.com/malchata/yall.js), [lozad.js](https://github.com/ApoorvSaxena/lozad.js) to handle it.
 
-[Implementation example with lazysizes](https://codesandbox.io/s/w7vx5w1ln7?fontsize=14)
+[Implementation example with lazysizes](https://codesandbox.io/s/js-cloudimage-360-view-examples-ux850x)
 
-[Implementation example with yall.js](https://codesandbox.io/s/ym2xrk87xv?fontsize=14)
+[Implementation example with yall.js](https://codesandbox.io/s/js-cloudimage-360-view-xjpdg1)
 
-[Implementation example with lozad.js](https://codesandbox.io/s/0185934m8p?fontsize=14)
+[Implementation example with lozad.js](https://codesandbox.io/s/js-cloudimage-360-view-examples-8iukcn)
 
 ## <a name="best-practices"/> Best practices
 
@@ -778,4 +803,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)

package/dist/ci360.service.js

@@ -117,6 +117,10 @@ var CI360Viewer = /*#__PURE__*/function () {
       if (isMouseOnHotspotElement) {
         this.isClicked = false;
       }
+
+      if (this.hotspotsConfigs) {
+        (0, _utils.updateHotspots)(this.container, this.hotspotsConfigs, this.activeImageX, this.activeImageY, this.movingDirection);
+      }
     }
   }, {
     key: "mouseUp",
@@ -821,7 +825,7 @@ var CI360Viewer = /*#__PURE__*/function () {
   }, {
     key: "onFirstImageLoaded",
     value: function onFirstImageLoaded(image) {
-      if (!this.hide360Logo && !this.lazyload) this.add360ViewIcon();
+      this.add360ViewIcon();
       var ctx = this.canvas.getContext("2d");
       ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
       this.updateContainerAndCanvasSize(image);
@@ -862,10 +866,6 @@ var CI360Viewer = /*#__PURE__*/function () {
       if (this.fullscreen && !this.fullscreenView) {
         this.addFullscreenIcon();
       }
-
-      if (this.hotspotsConfigs && !this.autoplay) {
-        (0, _utils.updateHotspots)(this.container, this.hotspotsConfigs, this.activeImageX, this.activeImageY, this.movingDirection);
-      }
     }
   }, {
     key: "onAllImagesLoaded",
@@ -890,16 +890,13 @@ var CI360Viewer = /*#__PURE__*/function () {
       }
 
       if (this.view360Icon) {
+        if (this.hide360Logo) return this.remove360ViewIcon();
         this.view360Icon.innerText = ''; //TODO [deprecated]: remove setView360Icon in the upcoming versions
 
         if (this.logoSrc) (0, _ci.setView360Icon)(this.view360Icon, this.logoSrc);
       }
 
       this.initControls();
-
-      if (this.hotspotsConfigs && !this.autoplay) {
-        (0, _utils.updateHotspots)(this.container, this.hotspotsConfigs, this.activeImageX, this.activeImageY, this.movingDirection);
-      }
     }
   }, {
     key: "magnify",
@@ -968,13 +965,6 @@ var CI360Viewer = /*#__PURE__*/function () {
           window.clearTimeout(_this4.loopTimeoutId);
           _this4.autoplay = false;
 
-          if (!_this4.hide360Logo) {
-            _this4.add360ViewIcon();
-
-            _this4.view360Icon.innerText = '';
-            (0, _ci.setView360Icon)(_this4.view360Icon, _this4.logoSrc);
-          }
-
           if (_this4.hotspotsConfigs) {
             (0, _utils.updateHotspots)(_this4.container, _this4.hotspotsConfigs, _this4.activeImageX, _this4.activeImageY, _this4.movingDirection, _this4.isClicked);
           }

package/dist/ci360.utils.js

@@ -45,7 +45,7 @@ var get360ViewProps = function get360ViewProps(image) {
     controlReverse: isTrue(image, 'control-reverse'),
     stopAtEdges: isTrue(image, 'stop-at-edges'),
     hide360Logo: isTrue(image, 'hide-360-logo'),
-    logoSrc: attr(image, 'logo-src') || 'https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/360_view.svg',
+    logoSrc: attr(image, 'logo-src') || 'https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/360_view.svg',
     ratio: attr(image, 'ratio') || attr(image, 'data-ratio'),
     imageInfo: attr(image, 'info') || attr(image, 'data-info') || isTrue(image, 'info')
   };

package/dist/static/css/hotspots.css

@@ -12,12 +12,12 @@
 .cloudimage-360-hotspot-link-icon::before {
   content: '';
   position: absolute;
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
   background-image: url('https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/assets/img/link-hotspot.svg');
   background-color: #0C6DC7;
   background-repeat: no-repeat;
-  background-size: 8px;
+  background-size: 17px 7px;
   background-position: center;
   left: 50%;
   top: 50%;
@@ -42,30 +42,19 @@
 .cloudimage-360-hotspot-custom-icon::before {
   content: '';
   position: absolute;
-  width: 18px;
-  height: 18px;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  box-sizing: border-box;
+  width: 16px;
+  height: 16px;
+  background-image: url('https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/assets/img/plus.svg');
   background-color: #76AD01;
   background-repeat: no-repeat;
-  background-size: 8px;
+  background-size: 17px 7px;
   background-position: center;
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);
-  border-radius: 50%;
-  animation: pulse 2s infinite;
-  cursor: auto;
-}
-
-.cloudimage-360-hotspot-custom-icon::after {
-  content: '+';
-  position: absolute;
   left: 50%;
   top: 50%;
-  color: #FFF;
-  font-weight: 400;
   transform: translate(-50%, -50%);
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.25);
+  border-radius: 50%;
+	animation: pulse 2s infinite;
   cursor: auto;
 }
 
@@ -103,19 +92,23 @@
   transform: rotate(45deg);
 }
 
-.cloudimage-360-hotspot-popup[data-popper-placement^='top'] > .cloudimage-360-popup-arrow {
+.cloudimage-360-hotspot-popup[data-popper-placement^='top']
+  > .cloudimage-360-popup-arrow {
   bottom: -4px;
 }
 
-.cloudimage-360-hotspot-popup[data-popper-placement^='bottom'] > .cloudimage-360-popup-arrow {
+.cloudimage-360-hotspot-popup[data-popper-placement^='bottom']
+  > .cloudimage-360-popup-arrow {
   top: -4px;
 }
 
-.cloudimage-360-hotspot-popup[data-popper-placement^='left'] > .cloudimage-360-popup-arrow {
+.cloudimage-360-hotspot-popup[data-popper-placement^='left']
+  > .cloudimage-360-popup-arrow {
   right: -4px;
 }
 
-.cloudimage-360-hotspot-popup[data-popper-placement^='right'] > .cloudimage-360-popup-arrow {
+.cloudimage-360-hotspot-popup[data-popper-placement^='right']
+  > .cloudimage-360-popup-arrow {
   left: -4px;
 }
 
@@ -148,7 +141,7 @@
 
 .cloudimage-360-carousel-dots {
   display: flex;
-  column-gap: 3px;
+  column-gap: 6px;
   justify-content: center;
   flex-wrap: wrap;
   margin: 5px auto;
@@ -158,8 +151,8 @@
 }
 
 .cloudimage-360-carousel-dot {
-  width: 5px;
-  height: 5px;
+  width: 6px;
+  height: 6px;
   background-color: #C9D0DE;
   border-radius: 50%;
   cursor: pointer;

package/dist/static/css/style.css

@@ -15,7 +15,7 @@
   height: 25px;
   margin-bottom: 5px;
   cursor: pointer;
-  background: url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/loupe.svg') 50% 50% / cover no-repeat;
+  background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/loupe.svg') 50% 50% / cover no-repeat;
 }
 
 .cloudimage-360-fullscreen-icon {
@@ -23,7 +23,7 @@
   height: 25px;
   margin-bottom: 5px;
   cursor: pointer;
-  background: url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/full_screen.svg') 50% 50% / cover no-repeat;
+  background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/full_screen.svg') 50% 50% / cover no-repeat;
 }
 
 .cloudimage-360-reset-zoom-icon {
@@ -39,7 +39,7 @@
   width: 25px;
   height: 25px;
   cursor: pointer;
-  background: url('https://scaleflex.ultrafast.io/https://scaleflex.airstore.io/filerobot/js-cloudimage-360-view/cross.svg') 50% 50% / cover no-repeat;
+  background: url('https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/cross.svg') 50% 50% / cover no-repeat;
 }
 
 .cloudimage-360-loader {

package/dist/utils/container-elements/create-360-view-circle-icon.js

@@ -7,7 +7,7 @@ exports.create360ViewCircleIcon = void 0;
 
 var create360ViewCircleIcon = function create360ViewCircleIcon(circleOffset) {
   var view360CircleIcon = new Image();
-  view360CircleIcon.src = 'https://scaleflex.ultrafast.io/https://scaleflex.api.airstore.io/v1/get/_/2236d56f-914a-5a8b-a3ae-f7bde1c50000/360.svg';
+  view360CircleIcon.src = 'https://scaleflex.cloudimg.io/v7/plugins/js-cloudimage-360-view/assets/img/360.svg';
   view360CircleIcon.style.bottom = "".concat(circleOffset, "%");
   view360CircleIcon.className = 'cloudimage-360-view-360-circle';
   return view360CircleIcon;

package/dist/utils/image-src/generate-images-path.js

@@ -11,7 +11,7 @@ var _getResponsiveWidthOfContainer = require("../responsive/get-responsive-width
 
 var _getSizeAccordingToPixelRatio = require("../responsive/get-size-according-to-pixel-ratio");
 
-var generateImagesPath = function generateImagesPath(srcConfig) {
+var generateImagesPath = function generateImagesPath(srcConfig, loadOriginalImages) {
   var container = srcConfig.container,
       folder = srcConfig.folder,
       apiVersion = srcConfig.apiVersion,
@@ -28,10 +28,12 @@ var generateImagesPath = function generateImagesPath(srcConfig) {
 
   if (ciToken) {
     var imageOffsetWidth = container.offsetWidth;
-    var vesrion = _falsyValues.FALSY_VALUES.indexOf(apiVersion) !== -1 ? null : apiVersion;
-    var finalApiVersion = vesrion ? "".concat(vesrion, "/") : '';
+    var version = !(_falsyValues.FALSY_VALUES.indexOf(apiVersion) !== -1) ? apiVersion : null;
+    var finalApiVersion = version ? "".concat(version, "/") : '';
     var ciSizeNext = (0, _getSizeAccordingToPixelRatio.getSizeAccordingToPixelRatio)((0, _getResponsiveWidthOfContainer.getResponsiveWidthOfContainer)(imageOffsetWidth));
-    src = "https://".concat(ciToken, ".cloudimg.io/").concat(finalApiVersion).concat(src, "?").concat(ciTransformation || "width=".concat(ciSizeNext)).concat(ciFilters ? "&f=".concat(ciFilters) : '');
+    var isCloudImageUrl = new URL(src).origin.indexOf('cloudimg') !== -1;
+    var cdn = isCloudImageUrl ? src : "https://".concat(ciToken, ".cloudimg.io/").concat(finalApiVersion).concat(src);
+    src = "".concat(cdn, "?").concat(ciTransformation || "".concat(!loadOriginalImages ? "width=".concat(ciSizeNext) : '', " ")).concat(ciFilters ? "&f=".concat(ciFilters) : '');
   }
 
   return src;

package/dist/utils/load-images/images-from-list/prepare-images-from-list.js

@@ -22,13 +22,7 @@ var prepareImagesFromList = function prepareImagesFromList(images, srcConfig, lo
 
     nextSrcConfig.folder = /(http(s?)):\/\//gi.test(src) ? '' : folder;
     nextSrcConfig.filename = src;
-
-    if (loadOriginalImages) {
-      var lastIndex = resultSrc.lastIndexOf('//');
-      return resultSrc.slice(lastIndex);
-    }
-
-    return (0, _generateImagesPath.generateImagesPath)(nextSrcConfig);
+    return (0, _generateImagesPath.generateImagesPath)(nextSrcConfig, loadOriginalImages);
   });
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-cloudimage-360-view",
-  "version": "3.0.0",
+  "version": "3.0.3",
   "main": "dist/index.js",
   "description": "",
   "author": "scaleflex",