js-cloudimage-360-view - npm Package Compare versions

Comparing version 3.0.0-beta.2 to 3.0.0

CHANGELOG.md

@@ -28,3 +28,96 @@ # Changelog
 -------------
+## 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
+### Fixed
+- hide 360 logo after play once
 
+## 2.7.12 - 2022-03-19
+### Changed
+- hotspots init method
+
+## 2.7.11 - 2022-03-17
+### Fixed
+- canvas aspect ratio
+- initialization of lazyloading
+
+## 2.7.10 - 2022-03-01
+### Fixed
+- image quality in fullscreen
+- resized image loading
+
+## 2.7.9 - 2022-02-27
+### Fixed
+- typo in documentation
+
+## 2.7.8 - 2022-02-27
+### Added
+- possibility to add new view to CI360 views
+### Fixed
+- re-render method
+
+## 2.7.7 - 2022-02-24
+### Fixed
+- container width on mobile
+- re-render method
+
+## 2.7.6 - 2022-02-20
+### Fixed
+- drag speed
+- responsive canvas width and height
+
+## 2.7.5 - 2022-02-08
+### Added
+- update method to re-render or re-init the plugin
+### Fixed
+- drag speed on mobile
+- error when drag speed is too high
+- error in dependencies
+
+## 2.7.4 - 2022-01-26
+### Fixed
+- typo in documentation file
+## 2.7.3 - 2022-01-26
+### Fixed
+- typo in documentation file
+
+## 2.7.2 - 2022-01-26
+### Added
+- possibility to fit container relative to its width or height and maintain the aspect ratio
+- possibility to reverse the directions of the keys on the keyboard
+### Fixed
+- pointer zoom behavior
+- error while loading images from lists
+- get the active image index
+
+## 2.7.1 - 2021-11-06
+### Added
+- click to reset mouse zoom
+- show 360 logo after play once
+### Fixed
+- set click as default value to start zoom
+- Sass error
+### Changed
+- pointer zoom behavior
+
+## 2.7.0 - 2021-11-04
+### Added
+- play once then stop auto-play
+- spin in the y-direction
+- zoom with mouse wheel
+- zoom with fingers on mobile
+- possibility to change icons styles
+
+### Fixed
+- hide scrollbar in fullscreen mode
+- auto-play not working on mobile
+- error on init the plugin inside a modal
+- removed chrome warning about non-passive events
+- images are not resized when window size changes
+
+### Changed
+- migrate CDN URL to V7
+
 ## 2.6.0 - 2020-09-03
@@ -31,0 +124,0 @@

dist/ci360.service.js

@@ -1,29 +0,42 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.default = void 0;
 
-var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
-var _ci = require('./ci360.utils');
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
-var _ci2 = require('./ci360.constants');
+var _ci = require("./ci360.utils");
 
-require('./static/css/style.css');
+var _constants = require("./constants/");
 
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+require("./static/css/style.css");
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+require("./static/css/hotspots.css");
 
-var CI360Viewer = function () {
-  function CI360Viewer(container, fullscreen, ratio) {
-    _classCallCheck(this, CI360Viewer);
+var _utils = require("./utils");
 
+var _togglePopupEvents = require("./utils/hotspots/toggle-popup-events");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var CI360Viewer = /*#__PURE__*/function () {
+  function CI360Viewer(container, fullscreen, hotspotsConfigs) {
+    (0, _classCallCheck2.default)(this, CI360Viewer);
     this.container = container;
-    this.movementStart = { x: 0, y: 0 };
+    this.movementStart = {
+      x: 0,
+      y: 0
+    };
     this.isStartSpin = false;
-    this.movingDirection = _ci2.ORIENTATIONS.CENTER;
+    this.movingDirection = _constants.ORIENTATIONS.CENTER;
     this.isClicked = false;
@@ -35,35 +48,48 @@ this.loadedImagesX = 0;
     this.fullscreenView = !!fullscreen;
-    this.ratio = ratio;
     this.imagesX = [];
     this.imagesY = [];
+    this.originalImagesX = [];
+    this.originalImagesY = [];
     this.resizedImagesX = [];
     this.resizedImagesY = [];
-    this.originalImagesX = [];
-    this.originalImagesY = [];
     this.devicePixelRatio = Math.round(window.devicePixelRatio || 1);
     this.isMobile = !!('ontouchstart' in window || navigator.msMaxTouchPoints);
     this.id = container.id;
-    this.init(container);
-    this.clickedToZoom = false;
+    this.hotspotsConfigs = hotspotsConfigs && (0, _utils.generateHotspotsConfigs)(hotspotsConfigs);
     this.isMagnifyOpen = false;
+    this.isDragged = false;
     this.startPointerZoom = false;
     this.zoomIntensity = 0;
     this.mouseTracked = false;
-    this.intialPositions = { x: 0, y: 0 };
-    this.pointerCurrentPosition = { x: 0, y: 0 };
-    this.startPinchZoom = false;
-    this.prevDistanceBetweenFingers = 0;
+    this.intialPositions = {
+      x: 0,
+      y: 0
+    };
+    this.pointerCurrentPosition = {
+      x: 0,
+      y: 0
+    };
+    this.isStartedLoadOriginalImages = false;
+    this.init(container);
   }
 
-  _createClass(CI360Viewer, [{
-    key: 'mouseDown',
+  (0, _createClass2.default)(CI360Viewer, [{
+    key: "isReady",
+    value: function isReady() {
+      var loadedXImages = this.imagesX.filter(function (image) {
+        return image;
+      });
+      var loadedYImages = this.imagesY.filter(function (image) {
+        return image;
+      });
+      var totalAmount = this.amountX + this.amountY;
+      return loadedXImages.length + loadedYImages.length === totalAmount;
+    }
+  }, {
+    key: "mouseDown",
     value: function mouseDown(event) {
-      event.preventDefault();
-
+      if (!this.imagesLoaded) return;
+      var isMouseOnHotspotElement = (0, _utils.isMouseOnHotspot)();
       var pageX = event.pageX,
           pageY = event.pageY;
-
-
-      if (!this.imagesLoaded) return;
-
       this.hideInitialIcons();
@@ -74,82 +100,213 @@
         this.autoplay = false;
+        this.isZoomReady = true;
       }
 
-      this.intialPositions = { x: pageX, y: pageY };
-      this.movementStart = { x: pageX, y: pageY };
+      this.intialPositions = {
+        x: pageX,
+        y: pageY
+      };
+      this.movementStart = {
+        x: pageX,
+        y: pageY
+      };
       this.isClicked = true;
-      this.clickedToZoom = true;
-      this.container.style.cursor = 'grabbing';
+      this.isDragged = false;
+
+      if (this.hotspotsConfigs) {
+        (0, _togglePopupEvents.togglePopupEvents)(this.hotspotsConfigs, event, true);
+      }
+
+      if (isMouseOnHotspotElement) {
+        this.isClicked = false;
+      }
     }
   }, {
-    key: 'mouseUp',
+    key: "mouseUp",
     value: function mouseUp() {
+      var _this = this;
+
       if (!this.imagesLoaded || !this.isClicked) return;
-
-      this.movementStart = { x: 0, y: 0 };
+      this.movementStart = {
+        x: 0,
+        y: 0
+      };
       this.isStartSpin = false;
       this.isClicked = false;
-      this.container.style.cursor = 'grab';
 
-      if (this.bottomCircle && !this.zoomIntensity) {
+      if (this.bottomCircle && !this.mouseTracked) {
         this.show360ViewCircleIcon();
       }
+
+      if (this.hotspotsConfigs) {
+        (0, _togglePopupEvents.togglePopupEvents)(this.hotspotsConfigs);
+      }
+
+      if (this.pointerZoom && !this.fullscreenView) {
+        setTimeout(function () {
+          _this.isZoomReady = true;
+        }, 50);
+
+        if (this.mouseTracked) {
+          this.container.style.cursor = 'zoom-out';
+        } else {
+          this.container.style.cursor = 'zoom-in';
+        }
+      } else {
+        this.container.style.cursor = 'grab';
+      }
     }
   }, {
-    key: 'mouseMove',
+    key: "mouseClick",
+    value: function mouseClick(event) {
+      if (!this.pointerZoom || this.fullscreenView) return;
+      this.setCursorPosition(event);
+      this.hideInitialIcons();
+
+      if (!this.isStartedLoadOriginalImages && !this.isDragged && this.isZoomReady) {
+        this.prepareOriginalImages(event);
+      }
+
+      if (this.isAllOriginalImagesLoaded && !this.isDragged && this.isZoomReady) {
+        this.togglePointerZoom(event);
+      }
+
+      ;
+    }
+  }, {
+    key: "mouseMove",
     value: function mouseMove(event) {
       if (!this.imagesLoaded) return;
-
       var pageX = event.pageX,
           pageY = event.pageY;
 
-
       if (this.mouseTracked) {
         this.setCursorPosition(event);
+
+        if (!this.isClicked) {
+          this.update();
+        }
       }
 
       if (this.isClicked) {
-        var nextPositions = { x: pageX, y: pageY };
-
-        this.updateMovingDirection(this.intialPositions, nextPositions);
+        var nextPositions = {
+          x: pageX,
+          y: pageY
+        };
+        this.container.style.cursor = 'grabbing';
+        this.isDragged = true;
+        this.movingDirection = (0, _utils.getMovingDirection)(this.isStartSpin, this.allowSpinY, this.intialPositions, nextPositions, this.movingDirection);
         this.onMoveHandler(event);
-      } else if (this.zoomIntensity) {
-        this.update();
       }
     }
   }, {
-    key: 'updateMovingDirection',
-    value: function updateMovingDirection(prevPosition, nextPositions) {
-      if (this.isStartSpin) return;
+    key: "mouseLeave",
+    value: function mouseLeave() {
+      if (!this.imagesLoaded) return;
 
-      var differenceInPositionX = Math.abs(prevPosition.x - nextPositions.x);
-      var differenceInPositionY = Math.abs(prevPosition.y - nextPositions.y);
-      var sensitivity = 10;
+      if (this.pointerZoom && this.mouseTracked) {
+        this.togglePointerZoom();
+      }
 
-      if (differenceInPositionX > sensitivity) this.movingDirection = _ci2.ORIENTATIONS.X;
+      if (this.isMagnifyOpen) {
+        this.closeMagnifier();
+      }
+    }
+  }, {
+    key: "togglePointerZoom",
+    value: function togglePointerZoom() {
+      var _this2 = this;
 
-      if (differenceInPositionY > sensitivity && this.allowSpinY) this.movingDirection = _ci2.ORIENTATIONS.Y;
+      if (this.autoplay || this.loopTimeoutId) {
+        this.stop();
+        this.autoplay = false;
+      }
+
+      if (this.mouseTracked) {
+        var zoomSteps = (0, _utils.generateZoomOutSteps)(this.pointerZoom);
+        this.container.style.cursor = 'zoom-in';
+        zoomSteps.forEach(function (step, index) {
+          setTimeout(function () {
+            _this2.zoomIntensity = step;
+
+            _this2.update();
+
+            var isReachedIntialScale = index === zoomSteps.length - 1;
+
+            if (isReachedIntialScale) {
+              _this2.mouseTracked = false;
+
+              _this2.update();
+            }
+
+            ;
+          }, (_this2.pointerZoom - step) * 200);
+        });
+      } else {
+        if (this.bottomCircle) this.hide360ViewCircleIcon();
+
+        var _zoomSteps = (0, _utils.generateZoomInSteps)(this.pointerZoom);
+
+        if (this.hotspotsConfigs) {
+          (0, _utils.hideHotspotsIcons)();
+        }
+
+        _zoomSteps.forEach(function (step) {
+          setTimeout(function () {
+            _this2.zoomIntensity = step;
+
+            _this2.update();
+          }, step * 200);
+        });
+
+        this.mouseTracked = true;
+        this.container.style.cursor = 'zoom-out';
+      }
     }
   }, {
-    key: 'mouseScroll',
-    value: function mouseScroll(event) {
-      if (this.disablePointerZoom || this.isMagnifyOpen) return;
+    key: "onOriginalImageLoad",
+    value: function onOriginalImageLoad(orientation, event, image, index) {
+      if (orientation === _constants.ORIENTATIONS.Y) {
+        this.originalImagesY[index] = image;
+      } else {
+        this.originalImagesX[index] = image;
+      }
 
-      var isClickedToZoom = this.toStartPointerZoom === _ci2.TO_START_POINTER_ZOOM.CLICK_TO_START && this.clickedToZoom;
-      var isScrolledToZoom = this.toStartPointerZoom === _ci2.TO_START_POINTER_ZOOM.SCROLL_TO_START;
+      var loadedOriginalXImages = this.originalImagesX.filter(function (image) {
+        return image;
+      });
+      var loadedOriginalYImages = this.originalImagesY.filter(function (image) {
+        return image;
+      });
+      var totalAmount = this.amountX + this.amountY;
+      var totalLoadedImages = loadedOriginalXImages.length + loadedOriginalYImages.length;
+      var isAllImagesLoaded = loadedOriginalXImages.length + loadedOriginalYImages.length === this.amountX + this.amountY;
+      var percentage = Math.round(totalLoadedImages / totalAmount * 100);
+      this.updatePercentageInLoader(percentage);
 
-      if (isClickedToZoom || isScrolledToZoom) {
-        this.initMouseScrollZoom(event);
+      if (isAllImagesLoaded) {
+        this.removeLoader();
+        this.togglePointerZoom(event);
+        this.mouseTracked = true;
+        this.isAllOriginalImagesLoaded = true;
       }
     }
   }, {
-    key: 'touchStart',
+    key: "prepareOriginalImages",
+    value: function prepareOriginalImages(event) {
+      var srcX = (0, _utils.generateImagesPath)(this.srcXConfig);
+      this.isStartedLoadOriginalImages = true;
+      this.loader = (0, _utils.createLoader)(this.innerBox);
+      this.container.style.cursor = 'wait';
+      (0, _utils.preloadOriginalImages)(this.srcXConfig, srcX, this.onOriginalImageLoad.bind(this, _constants.ORIENTATIONS.X, event));
+
+      if (this.allowSpinY) {
+        var srcY = (0, _utils.generateImagesPath)(this.srcYConfig);
+        (0, _utils.preloadOriginalImages)(this.srcYConfig, srcY, this.onOriginalImageLoad.bind(this, _constants.ORIENTATIONS.Y, event));
+      }
+    }
+  }, {
+    key: "touchStart",
     value: function touchStart(event) {
       if (!this.imagesLoaded) return;
-
-      var isPinchZoom = !this.disablePinchZoom && (0, _ci.isTwoFingers)(event) && !this.isMagnifyOpen;
-
-      if (isPinchZoom) {
-        this.initAndSetPinchZoom(event);
-      };
-
+      var isMouseOnHotspotElement = (0, _utils.isMouseOnHotspot)();
       this.hideInitialIcons();
@@ -162,36 +319,47 @@
 
-      this.intialPositions = { x: event.touches[0].clientX, y: event.touches[0].clientY };
-      this.movementStart = { x: event.touches[0].clientX, y: event.touches[0].clientY };
+      this.intialPositions = {
+        x: event.touches[0].clientX,
+        y: event.touches[0].clientY
+      };
+      this.movementStart = {
+        x: event.touches[0].clientX,
+        y: event.touches[0].clientY
+      };
       this.isClicked = true;
+
+      if (isMouseOnHotspotElement) {
+        this.isClicked = false;
+      }
     }
   }, {
-    key: 'touchEnd',
+    key: "touchEnd",
     value: function touchEnd() {
       if (!this.imagesLoaded) return;
-
-      if (this.zoomIntensity) this.resetZoom();
-
-      this.movementStart = { x: 0, y: 0 };
+      if (this.bottomCircle) this.show360ViewCircleIcon();
+      this.movementStart = {
+        x: 0,
+        y: 0
+      };
       this.isStartSpin = false;
       this.isClicked = false;
-
-      if (this.bottomCircle) this.show360ViewCircleIcon();
     }
   }, {
-    key: 'touchMove',
+    key: "touchMove",
     value: function touchMove(event) {
       if (!this.isClicked || !this.imagesLoaded) return;
 
-      if (!this.disablePinchZoom && (0, _ci.isTwoFingers)(event)) {
-        this.fingersPinchZoom(event);
-      } else {
-        var nextPositions = { x: event.touches[0].clientX, y: event.touches[0].clientY };
+      if (event.cancelable) {
+        event.preventDefault();
+      }
 
-        this.updateMovingDirection(this.intialPositions, nextPositions);
-        this.onMoveHandler(event);
-      }
+      var nextPositions = {
+        x: event.touches[0].clientX,
+        y: event.touches[0].clientY
+      };
+      this.movingDirection = (0, _utils.getMovingDirection)(this.isStartSpin, this.allowSpinY, this.intialPositions, nextPositions, this.movingDirection);
+      this.onMoveHandler(event);
     }
   }, {
-    key: 'keyDownGeneral',
-    value: function keyDownGeneral() {
+    key: "keyDownGeneral",
+    value: function keyDownGeneral(event) {
       if (!this.imagesLoaded) return;
@@ -202,5 +370,12 @@
       }
+
+      if (event.keyCode === 27) {
+        //ESC
+        if (this.mouseTracked) {
+          this.togglePointerZoom();
+        }
+      }
     }
   }, {
-    key: 'hideInitialIcons',
+    key: "hideInitialIcons",
     value: function hideInitialIcons() {
@@ -216,13 +391,3 @@ if (this.glass) {
   }, {
-    key: 'initMouseScrollZoom',
-    value: function initMouseScrollZoom(event) {
-      if (this.bottomCircle) this.hide360ViewCircleIcon();
-
-      this.hideInitialIcons();
-      this.mouseTracked = true;
-      this.setCursorPosition(event);
-      this.mouseScrollZoom(event);
-    }
-  }, {
-    key: 'setCursorPosition',
+    key: "setCursorPosition",
     value: function setCursorPosition(event) {
@@ -235,6 +400,5 @@ this.mousePositions = {
   }, {
-    key: 'getCursorPositionInCanvas',
+    key: "getCursorPositionInCanvas",
     value: function getCursorPositionInCanvas() {
       var canvasRect = this.canvas.getBoundingClientRect();
-
       this.pointerCurrentPosition = {
@@ -244,141 +408,43 @@ x: this.mousePositions.x - canvasRect.left,
       };
-
       return this.pointerCurrentPosition;
     }
   }, {
-    key: 'mouseScrollZoom',
-    value: function mouseScrollZoom(event) {
-      event.preventDefault();
+    key: "keyDown",
+    value: function keyDown(event) {
+      if (!this.imagesLoaded) return;
 
-      if (this.autoplay || this.loopTimeoutId) {
-        this.stop();
-        this.autoplay = false;
+      if (this.glass) {
+        this.closeMagnifier();
       }
 
-      var zoomFactor = (0, _ci.normalizeZoomFactor)(event, this.pointerZoomFactor);
-      var maxIntensity = (0, _ci.getMaxZoomIntensity)(this.canvas.width, this.maxScale);
-      this.startPointerZoom = true;
-      this.zoomIntensity += event.deltaY * zoomFactor;
-      this.zoomIntensity = Math.min(Math.max(0, this.zoomIntensity), maxIntensity);
-
-      if (this.zoomIntensity) {
-        if (this.resetZoomIcon) this.showResetZoomIcon();
-      } else {
-        if (this.resetZoomIcon) this.hideResetZoomIcon();
-
-        if (this.bottomCircle) this.show360ViewCircleIcon();
-
-        this.startPointerZoom = false;
-        this.mouseTracked = false;
+      if (event.keyCode === 37) {
+        // left
+        this.keysReverse ? this.left() : this.right();
+        this.onSpin();
       }
 
-      this.update();
-    }
-  }, {
-    key: 'initAndSetPinchZoom',
-    value: function initAndSetPinchZoom(event) {
-      if (this.bottomCircle) this.hide360ViewCircleIcon();
-
-      var _getFingersPosition = this.getFingersPosition(event),
-          _getFingersPosition2 = _slicedToArray(_getFingersPosition, 2),
-          fingerOnePosition = _getFingersPosition2[0],
-          fingerTwoPosition = _getFingersPosition2[1];
-
-      this.prevDistanceBetweenFingers = this.getDistanceBetweenFingers(fingerOnePosition, fingerTwoPosition);
-    }
-  }, {
-    key: 'getDistanceBetweenFingers',
-    value: function getDistanceBetweenFingers(fingerOne, fingerTwo) {
-      var xPosition = fingerTwo.x - fingerOne.x;
-      var yPosition = fingerTwo.y - fingerOne.y;
-
-      return Math.sqrt(Math.pow(xPosition, 2) + Math.pow(yPosition, 2));
-    }
-  }, {
-    key: 'updateAveragePositionBetweenFingers',
-    value: function updateAveragePositionBetweenFingers(fingerOne, fingerTwo) {
-      var containerRect = this.canvas.getBoundingClientRect();
-      var offSetX = containerRect.left;
-      var offSetY = containerRect.top;
-
-      this.pointerCurrentPosition.x = (fingerOne.x + fingerTwo.x) / 2 - offSetX;
-
-      this.pointerCurrentPosition.y = (fingerOne.y + fingerTwo.y) / 2 - offSetY;
-    }
-  }, {
-    key: 'getFingersPosition',
-    value: function getFingersPosition(event) {
-      var p1 = event.targetTouches[0];
-      var p2 = event.targetTouches[1];
-
-      var fingerOnePosition = { x: p1.clientX, y: p1.clientY };
-      var fingerTwoPosition = { x: p2.clientX, y: p2.clientY };
-
-      return [fingerOnePosition, fingerTwoPosition];
-    }
-  }, {
-    key: 'fingersPinchZoom',
-    value: function fingersPinchZoom(event) {
-      var _getFingersPosition3 = this.getFingersPosition(event),
-          _getFingersPosition4 = _slicedToArray(_getFingersPosition3, 2),
-          fingerOnePosition = _getFingersPosition4[0],
-          fingerTwoPosition = _getFingersPosition4[1];
-
-      var currentDistanceBetweenFingers = this.getDistanceBetweenFingers(fingerOnePosition, fingerTwoPosition);
-      var zoomFactor = this.pinchZoomFactor * 30;
-
-      var zoomSensitivity = 1.5;
-      var isZoomIn = currentDistanceBetweenFingers > this.prevDistanceBetweenFingers + zoomSensitivity;
-      var isZoomOut = currentDistanceBetweenFingers + zoomSensitivity < this.prevDistanceBetweenFingers;
-      var maxIntensity = (0, _ci.getMaxZoomIntensity)(this.canvas.width, this.maxScale);
-
-      this.startPinchZoom = true;
-
-      this.updateAveragePositionBetweenFingers(fingerOnePosition, fingerTwoPosition);
-
-      if (isZoomIn && this.zoomIntensity <= maxIntensity) {
-        this.zoomIntensity += zoomFactor;
-      } else if (isZoomOut && this.zoomIntensity >= zoomFactor) {
-        this.zoomIntensity -= zoomFactor;
+      if (event.keyCode === 39) {
+        // right
+        this.keysReverse ? this.right() : this.left();
+        this.onSpin();
       }
 
-      this.update();
-      this.prevDistanceBetweenFingers = currentDistanceBetweenFingers;
-    }
-  }, {
-    key: 'resetZoom',
-    value: function resetZoom() {
-      this.startPointerZoom = false;
-      this.startPinchZoom = false;
-      this.mouseTracked = false;
-      this.clickedToZoom = false;
+      if (this.allowSpinY) {
+        event.preventDefault();
 
-      if (this.resetZoomIcon) this.hideResetZoomIcon();
+        if (event.keyCode === 38) {
+          // up
+          this.keysReverse ? this.top() : this.bottom();
+          this.onSpin();
+        }
 
-      if (this.zoomIntensity) {
-        this.zoomIntensity = 0;
-        this.update();
-      }
-    }
-  }, {
-    key: 'keyDown',
-    value: function keyDown(event) {
-      if (!this.imagesLoaded) return;
-
-      if (this.glass) {
-        this.closeMagnifier();
-      }
-
-      if ([37, 39].indexOf(event.keyCode) !== -1) {
-        if (37 === event.keyCode) {
-          if (this.reversed) this.left();else this.right();
-        } else if (39 === event.keyCode) {
-          if (this.reversed) this.right();else this.left();
+        if (event.keyCode === 40) {
+          // down
+          this.keysReverse ? this.bottom() : this.top();
+          this.onSpin();
         }
-
-        this.onSpin();
       }
     }
   }, {
-    key: 'onSpin',
+    key: "onSpin",
     value: function onSpin() {
@@ -399,3 +465,3 @@ if (this.bottomCircle) {
   }, {
-    key: 'keyUp',
+    key: "keyUp",
     value: function keyUp(event) {
@@ -409,3 +475,3 @@ if (!this.imagesLoaded) return;
   }, {
-    key: 'onFinishSpin',
+    key: "onFinishSpin",
     value: function onFinishSpin() {
@@ -415,78 +481,3 @@ if (this.bottomCircle) this.show360ViewCircleIcon();
   }, {
-    key: 'onMoveHandler',
-    value: function onMoveHandler(event) {
-      var currentPositionX = this.isMobile ? event.touches[0].clientX : event.pageX;
-      var currentPositionY = this.isMobile ? event.touches[0].clientY : event.pageY;
-
-      var isMoveRight = currentPositionX - this.movementStart.x >= this.speedFactor;
-      var isMoveLeft = this.movementStart.x - currentPositionX >= this.speedFactor;
-      var isMoveTop = this.movementStart.y - currentPositionY >= this.speedFactor;
-      var isMoveBottom = currentPositionY - this.movementStart.y >= this.speedFactor;
-
-      if (this.bottomCircle) this.hide360ViewCircleIcon();
-
-      if (isMoveRight && this.movingDirection === _ci2.ORIENTATIONS.X) {
-        this.moveRight(currentPositionX);
-
-        this.isStartSpin = true;
-      } else if (isMoveLeft && this.movingDirection === _ci2.ORIENTATIONS.X) {
-        this.moveLeft(currentPositionX);
-
-        this.isStartSpin = true;
-      } else if (isMoveTop && this.movingDirection === _ci2.ORIENTATIONS.Y) {
-        this.moveTop(currentPositionY);
-
-        this.isStartSpin = true;
-      } else if (isMoveBottom && this.movingDirection === _ci2.ORIENTATIONS.Y) {
-        this.moveBottom(currentPositionY);
-
-        this.isStartSpin = true;
-      }
-    }
-  }, {
-    key: 'moveRight',
-    value: function moveRight(currentPositionX) {
-      var itemsSkippedRight = Math.floor((currentPositionX - this.movementStart.x) / this.speedFactor) || 1;
-
-      this.spinReverse ? this.moveActiveIndexDown(itemsSkippedRight) : this.moveActiveIndexUp(itemsSkippedRight);
-
-      this.movementStart.x = currentPositionX;
-      this.activeImageY = 1;
-      this.update();
-    }
-  }, {
-    key: 'moveLeft',
-    value: function moveLeft(currentPositionX) {
-      var itemsSkippedLeft = Math.floor((this.movementStart.x - currentPositionX) / this.speedFactor) || 1;
-
-      this.spinReverse ? this.moveActiveIndexUp(itemsSkippedLeft) : this.moveActiveIndexDown(itemsSkippedLeft);
-
-      this.activeImageY = 1;
-      this.movementStart.x = currentPositionX;
-      this.update();
-    }
-  }, {
-    key: 'moveTop',
-    value: function moveTop(currentPositionY) {
-      var itemsSkippedTop = Math.floor((this.movementStart.y - currentPositionY) / this.speedFactor) || 1;
-
-      this.spinReverse ? this.moveActiveYIndexUp(itemsSkippedTop) : this.moveActiveYIndexDown(itemsSkippedTop);
-
-      this.activeImageX = 1;
-      this.movementStart.y = currentPositionY;
-      this.update();
-    }
-  }, {
-    key: 'moveBottom',
-    value: function moveBottom(currentPositionY) {
-      var itemsSkippedBottom = Math.floor((currentPositionY - this.movementStart.y) / this.speedFactor) || 1;
-
-      this.spinReverse ? this.moveActiveYIndexDown(itemsSkippedBottom) : this.moveActiveYIndexUp(itemsSkippedBottom);
-
-      this.activeImageX = 1;
-      this.movementStart.y = currentPositionY;
-      this.update();
-    }
-  }, {
-    key: 'moveActiveIndexUp',
+    key: "moveActiveIndexUp",
     value: function moveActiveIndexUp(itemsSkipped) {
@@ -501,15 +492,12 @@ var isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse;
 
-          if (isReverse ? this.prevElem : this.rightElem) {
-            (0, _ci.addClass)(isReverse ? this.leftElem : this.leftElem, 'not-active');
+          if (isReverse ? this.leftElem : this.rightElem) {
+            (0, _utils.addClass)(isReverse ? this.leftElem : this.rightElem, 'not-active');
           }
         } else {
           this.activeImageX += itemsSkipped;
-
-          if (this.rightElem) (0, _ci.removeClass)(this.rightElem, 'not-active');
-
-          if (this.leftElem) (0, _ci.removeClass)(this.leftElem, 'not-active');
+          if (this.rightElem) (0, _utils.removeClass)(this.rightElem, 'not-active');
+          if (this.leftElem) (0, _utils.removeClass)(this.leftElem, 'not-active');
         }
       } else {
         this.activeImageX = (this.activeImageX + itemsSkipped) % this.amountX || this.amountX;
-
         if (this.activeImageX === this.amountX && this.allowSpinY) this.spinY = true;
@@ -519,3 +507,3 @@ }
   }, {
-    key: 'moveActiveIndexDown',
+    key: "moveActiveIndexDown",
     value: function moveActiveIndexDown(itemsSkipped) {
@@ -531,10 +519,8 @@ var isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse;
           if (isReverse ? this.rightElem : this.leftElem) {
-            (0, _ci.addClass)(isReverse ? this.rightElem : this.leftElem, 'not-active');
+            (0, _utils.addClass)(isReverse ? this.rightElem : this.leftElem, 'not-active');
           }
         } else {
           this.activeImageX -= itemsSkipped;
-
-          if (this.leftElem) (0, _ci.removeClass)(this.leftElem, 'not-active');
-
-          if (this.rightElem) (0, _ci.removeClass)(this.rightElem, 'not-active');
+          if (this.leftElem) (0, _utils.removeClass)(this.leftElem, 'not-active');
+          if (this.rightElem) (0, _utils.removeClass)(this.rightElem, 'not-active');
         }
@@ -551,3 +537,3 @@ } else {
   }, {
-    key: 'moveActiveYIndexUp',
+    key: "moveActiveYIndexUp",
     value: function moveActiveYIndexUp(itemsSkipped) {
@@ -563,14 +549,11 @@ var isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse;
           if (isReverse ? this.bottomElem : this.topElem) {
-            (0, _ci.addClass)(isReverse ? this.bottomElem : this.topElem, 'not-active');
+            (0, _utils.addClass)(isReverse ? this.bottomElem : this.topElem, 'not-active');
           }
         } else {
           this.activeImageY += itemsSkipped;
-
-          if (this.topElem) (0, _ci.removeClass)(this.topElem, 'not-active');
-
-          if (this.bottomElem) (0, _ci.removeClass)(this.bottomElem, 'not-active');
+          if (this.topElem) (0, _utils.removeClass)(this.topElem, 'not-active');
+          if (this.bottomElem) (0, _utils.removeClass)(this.bottomElem, 'not-active');
         }
       } else {
         this.activeImageY = (this.activeImageY + itemsSkipped) % this.amountY || this.amountY;
-
         if (this.activeImageY === this.amountY) this.spinY = false;
@@ -580,3 +563,3 @@ }
   }, {
-    key: 'moveActiveYIndexDown',
+    key: "moveActiveYIndexDown",
     value: function moveActiveYIndexDown(itemsSkipped) {
@@ -592,9 +575,8 @@ var isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse;
           if (isReverse ? this.topElem : this.bottomElem) {
-            (0, _ci.addClass)(isReverse ? this.topElem : this.bottomElem, 'not-active');
+            (0, _utils.addClass)(isReverse ? this.topElem : this.bottomElem, 'not-active');
           }
         } else {
           this.activeImageY -= itemsSkipped;
-
-          if (this.bottomElem) (0, _ci.removeClass)(this.bottomElem, 'not-active');
-          if (this.topElem) (0, _ci.removeClass)(this.topElem, 'not-active');
+          if (this.bottomElem) (0, _utils.removeClass)(this.bottomElem, 'not-active');
+          if (this.topElem) (0, _utils.removeClass)(this.topElem, 'not-active');
         }
@@ -611,54 +593,83 @@ } else {
   }, {
-    key: 'loop',
-    value: function loop(reversed) {
-      switch (this.autoplayBehavior) {
-        case _ci2.AUTOPLAY_BEHAVIOR.SPIN_Y:
-          reversed ? this.bottom() : this.top();
-          break;
+    key: "moveRight",
+    value: function moveRight(currentPositionX) {
+      var itemsSkippedRight = (0, _utils.getItemSkipped)(currentPositionX, this.movementStart.x, this.speedFactor);
+      this.spinReverse ? this.moveActiveIndexDown(itemsSkippedRight) : this.moveActiveIndexUp(itemsSkippedRight);
+      this.movementStart.x = currentPositionX;
+      this.activeImageY = 1;
+      this.update();
+    }
+  }, {
+    key: "moveLeft",
+    value: function moveLeft(currentPositionX) {
+      var itemsSkippedLeft = (0, _utils.getItemSkipped)(this.movementStart.x, currentPositionX, this.speedFactor);
+      this.spinReverse ? this.moveActiveIndexUp(itemsSkippedLeft) : this.moveActiveIndexDown(itemsSkippedLeft);
+      this.activeImageY = 1;
+      this.movementStart.x = currentPositionX;
+      this.update();
+    }
+  }, {
+    key: "moveTop",
+    value: function moveTop(currentPositionY) {
+      var itemsSkippedTop = (0, _utils.getItemSkipped)(this.movementStart.y, currentPositionY, this.speedFactor);
+      this.spinReverse ? this.moveActiveYIndexUp(itemsSkippedTop) : this.moveActiveYIndexDown(itemsSkippedTop);
+      this.activeImageX = 1;
+      this.movementStart.y = currentPositionY;
+      this.update();
+    }
+  }, {
+    key: "moveBottom",
+    value: function moveBottom(currentPositionY) {
+      var itemsSkippedBottom = (0, _utils.getItemSkipped)(currentPositionY, this.movementStart.y, this.speedFactor);
+      this.spinReverse ? this.moveActiveYIndexDown(itemsSkippedBottom) : this.moveActiveYIndexUp(itemsSkippedBottom);
+      this.activeImageX = 1;
+      this.movementStart.y = currentPositionY;
+      this.update();
+    }
+  }, {
+    key: "onMoveHandler",
+    value: function onMoveHandler(event) {
+      var currentPositionX = this.isMobile ? event.touches[0].clientX : event.pageX;
+      var currentPositionY = this.isMobile ? event.touches[0].clientY : event.pageY;
+      var isMoveRight = currentPositionX - this.movementStart.x >= this.speedFactor;
+      var isMoveLeft = this.movementStart.x - currentPositionX >= this.speedFactor;
+      var isMoveTop = this.movementStart.y - currentPositionY >= this.speedFactor;
+      var isMoveBottom = currentPositionY - this.movementStart.y >= this.speedFactor;
+      if (this.bottomCircle) this.hide360ViewCircleIcon();
 
-        case _ci2.AUTOPLAY_BEHAVIOR.SPIN_XY:
-          if (this.spinY) {
-            reversed ? this.bottom() : this.top();
-          } else {
-            reversed ? this.left() : this.right();
-          }
-          break;
-
-        case _ci2.AUTOPLAY_BEHAVIOR.SPIN_YX:
-          if (this.spinY) {
-            reversed ? this.bottom() : this.top();
-          } else {
-            reversed ? this.left() : this.right();
-          }
-          break;
-
-        case _ci2.AUTOPLAY_BEHAVIOR.SPIN_X:
-        default:
-          reversed ? this.left() : this.right();
+      if (isMoveRight && this.movingDirection === _constants.ORIENTATIONS.X) {
+        this.moveRight(currentPositionX);
+        this.isStartSpin = true;
+      } else if (isMoveLeft && this.movingDirection === _constants.ORIENTATIONS.X) {
+        this.moveLeft(currentPositionX);
+        this.isStartSpin = true;
+      } else if (isMoveTop && this.movingDirection === _constants.ORIENTATIONS.Y) {
+        this.moveTop(currentPositionY);
+        this.isStartSpin = true;
+      } else if (isMoveBottom && this.movingDirection === _constants.ORIENTATIONS.Y) {
+        this.moveBottom(currentPositionY);
+        this.isStartSpin = true;
       }
     }
   }, {
-    key: 'right',
-    value: function right() {
-      this.movingDirection = _ci2.ORIENTATIONS.X;
+    key: "left",
+    value: function left() {
+      this.movingDirection = _constants.ORIENTATIONS.X;
       this.activeImageY = this.reversed ? this.amountY : 1;
-
-      this.moveActiveIndexUp(1);
+      this.moveActiveIndexDown(1);
       this.update();
     }
   }, {
-    key: 'left',
-    value: function left() {
-      this.movingDirection = _ci2.ORIENTATIONS.X;
+    key: "right",
+    value: function right() {
+      this.movingDirection = _constants.ORIENTATIONS.X;
       this.activeImageY = this.reversed ? this.amountY : 1;
-
-      this.moveActiveIndexDown(1);
+      this.moveActiveIndexUp(1);
       this.update();
     }
   }, {
-    key: 'top',
+    key: "top",
     value: function top() {
-      this.movingDirection = _ci2.ORIENTATIONS.Y;
+      this.movingDirection = _constants.ORIENTATIONS.Y;
       this.activeImageX = this.reversed ? this.amountX : 1;
-
       this.moveActiveYIndexUp(1);
@@ -668,7 +679,6 @@ this.update();
   }, {
-    key: 'bottom',
+    key: "bottom",
     value: function bottom() {
-      this.movingDirection = _ci2.ORIENTATIONS.Y;
+      this.movingDirection = _constants.ORIENTATIONS.Y;
       this.activeImageX = this.reversed ? this.amountX : 1;
-
       this.moveActiveYIndexDown(1);
@@ -678,150 +688,145 @@ this.update();
   }, {
-    key: 'onLoadResizedImages',
-    value: function onLoadResizedImages(orientation, event) {
-      this.incrementLoadedImages(orientation);
-
-      var totalAmount = this.amountX + this.amountY;
-      var totalLoadedImages = this.loadedImagesX + this.loadedImagesY;
-
-      if (totalLoadedImages === totalAmount) {
-        this.replaceImages(orientation);
-        this.update();
-      }
+    key: "loop",
+    value: function loop(reversed) {
+      var loopTriggers = {
+        left: this.left.bind(this),
+        right: this.right.bind(this),
+        top: this.top.bind(this),
+        bottom: this.bottom.bind(this)
+      };
+      (0, _utils.loop)(this.autoplayBehavior, this.spinY, reversed, loopTriggers);
     }
   }, {
-    key: 'replaceImages',
-    value: function replaceImages(orientation) {
-      if (orientation === _ci2.ORIENTATIONS.Y) {
-        this.imagesY = this.resizedImagesY;
-      } else {
-        this.imagesX = this.resizedImagesX;
-      }
-    }
-  }, {
-    key: 'requestNewImages',
-    value: function requestNewImages(src, amount, orientation) {
-      var _this = this;
+    key: "updateContainerAndCanvasSize",
+    value: function updateContainerAndCanvasSize(image) {
+      var imageAspectRatio = (0, _utils.getImageAspectRatio)(image, this.ratio);
 
-      if (orientation === _ci2.ORIENTATIONS.Y) {
-        this.resizedImagesY = [];
-        this.loadedImagesY = 0;
-      } else {
-        this.resizedImagesX = [];
-        this.loadedImagesX = 0;
+      if (this.fullscreenView) {
+        this.container.width = window.innerWidth * this.devicePixelRatio;
+        this.container.style.width = window.innerWidth + 'px';
+        this.container.height = window.innerHeight * this.devicePixelRatio;
+        this.container.style.height = window.innerHeight + 'px';
+        this.container.style.maxWidth = 'unset';
+        this.canvas.width = window.innerWidth * this.devicePixelRatio;
+        this.canvas.style.width = window.innerWidth + 'px';
+        this.canvas.height = window.innerHeight * this.devicePixelRatio;
+        this.canvas.style.height = window.innerHeight + 'px';
+        return;
       }
 
-      [].concat(_toConsumableArray(new Array(amount))).map(function (_item, index) {
-        var nextZeroFilledIndex = (0, _ci.pad)(index + 1, _this.indexZeroBase);
-        var resultSrc = src.replace('{index}', nextZeroFilledIndex);
-
-        _this.addUpdatedSizeImage(resultSrc, orientation, _this.lazyload, _this.lazySelector, index);
-      });
+      this.canvas.width = this.container.offsetWidth * this.devicePixelRatio;
+      this.canvas.style.width = this.container.offsetWidth + 'px';
+      this.canvas.height = this.container.offsetWidth / imageAspectRatio * this.devicePixelRatio;
+      this.canvas.style.height = this.container.offsetWidth / imageAspectRatio + 'px';
     }
   }, {
-    key: 'addUpdatedSizeImage',
-    value: function addUpdatedSizeImage(resultSrc, orientation, lazyload, lazySelector, index) {
-      var image = new Image();
-
-      if (lazyload && !this.fullscreenView) {
-        image.setAttribute('data-src', resultSrc);
-        image.className = image.className.length ? image.className + (' ' + lazySelector) : lazySelector;
-
-        if (index === 0) {
-          this.lazyloadInitImage = image;
-          image.style.position = 'absolute';
-          image.style.top = '0';
-          image.style.left = '0';
-          this.innerBox.appendChild(image);
-        }
+    key: "onResizedImageLoad",
+    value: function onResizedImageLoad(orientation, image, index) {
+      if (orientation === _constants.ORIENTATIONS.Y) {
+        this.resizedImagesY[index] = image;
       } else {
-        image.src = resultSrc;
+        this.resizedImagesX[index] = image;
       }
 
-      image.onload = this.onLoadResizedImages.bind(this, orientation);
-      image.onerror = this.onLoadResizedImages.bind(this, orientation);
+      var loadedResizedXImages = this.resizedImagesX.filter(function (image) {
+        return image;
+      });
+      var loadedResizedYImages = this.resizedImagesY.filter(function (image) {
+        return image;
+      });
+      var isAllImagesLoaded = loadedResizedXImages.length + loadedResizedYImages.length === this.amountX + this.amountY;
 
-      if (orientation === _ci2.ORIENTATIONS.Y) {
-        this.resizedImagesY.push(image);
-      } else {
-        this.resizedImagesX.push(image);
+      if (isAllImagesLoaded) {
+        this.imagesX = this.resizedImagesX;
+        this.imagesY = this.resizedImagesY;
+        this.update();
       }
     }
   }, {
-    key: 'requestResizedImages',
+    key: "showImageInfo",
+    value: function showImageInfo(ctx) {
+      ctx.font = "".concat(this.fullscreenView ? 28 : 14, "px serif");
+      ctx.fillStyle = this.info === 'white' ? '#FFF' : '#000';
+      var imageDimension = "image-dimension: ".concat(this.container.offsetWidth, "x").concat(this.container.offsetHeight, "px");
+      var currentXImage = 'active-index-x: ' + this.activeImageX;
+      var currentYImage = 'active-index-y: ' + this.activeImageY;
+      var imageIndex = [currentXImage, currentYImage].join(' | ');
+      ctx.fillText(imageDimension, 20, this.container.offsetHeight - 35);
+      ctx.fillText(imageIndex, 20, this.container.offsetHeight - 10);
+    }
+  }, {
+    key: "requestResizedImages",
     value: function requestResizedImages() {
-      var srcX = this.getSrc(this.responsive, this.container, this.folder, this.filenameX, this.ciParams);
+      if (!this.isReady()) return;
+      var responsive = this.ciParams.ciToken;
+      var firstImage = this.imagesX[0];
+      this.update();
+      if (!responsive || this.container.offsetWidth < firstImage.width * 1.5) return;
+      this.speedFactor = (0, _utils.getSpeedFactor)(this.dragSpeed, this.amountX, this.container.offsetWidth);
+      var srcX = (0, _utils.generateImagesPath)(this.srcXConfig);
+      (0, _utils.preloadImages)(this.srcXConfig, srcX, this.onResizedImageLoad.bind(this, _constants.ORIENTATIONS.X));
 
-      this.requestNewImages(srcX, this.amountX, _ci2.ORIENTATIONS.X);
-
       if (this.allowSpinY) {
-        var srcY = this.getSrc(this.responsive, this.container, this.folder, this.filenameY, this.ciParams);
-
-        this.requestNewImages(srcY, this.amountY, _ci2.ORIENTATIONS.Y);
+        var srcY = (0, _utils.generateImagesPath)(this.srcYConfig);
+        (0, _utils.preloadImages)(this.srcYConfig, srcY, this.onResizedImageLoad.bind(this, _constants.ORIENTATIONS.Y));
       }
     }
   }, {
-    key: 'update',
+    key: "update",
     value: function update() {
       var image = this.imagesX[this.activeImageX - 1];
 
-      if (this.movingDirection === _ci2.ORIENTATIONS.Y) {
+      if (this.movingDirection === _constants.ORIENTATIONS.Y) {
         image = this.imagesY[this.activeImageY - 1];
       }
 
+      if (!image) return;
       var ctx = this.canvas.getContext("2d");
-
       ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
+      this.updateContainerAndCanvasSize(image);
 
       if (this.fullscreenView) {
-        this.canvas.width = window.innerWidth * this.devicePixelRatio;
-        this.canvas.style.width = window.innerWidth + 'px';
-        this.canvas.height = window.innerHeight * this.devicePixelRatio;
-        this.canvas.style.height = window.innerHeight + 'px';
-
-        var _contain = (0, _ci.contain)(this.canvas.width, this.canvas.height, image.width, image.height),
+        var _contain = (0, _utils.contain)(this.canvas.width, this.canvas.height, image.width, image.height),
+            width = _contain.width,
+            height = _contain.height,
             offsetX = _contain.offsetX,
-            offsetY = _contain.offsetY,
-            width = _contain.width,
-            height = _contain.height;
+            offsetY = _contain.offsetY;
 
         ctx.drawImage(image, offsetX, offsetY, width, height);
       } else {
-        this.canvas.width = this.container.offsetWidth * this.devicePixelRatio;
-        this.canvas.style.width = this.container.offsetWidth + 'px';
-        this.canvas.height = this.container.offsetWidth * this.devicePixelRatio / image.width * image.height;
-        this.canvas.style.height = this.container.offsetWidth / image.width * image.height + 'px';
-
-        if (this.startPointerZoom || this.startPinchZoom) {
+        if (this.mouseTracked) {
           this.updateImageScale(ctx);
         } else {
+          if (this.hotspotsConfigs && !this.autoplay) {
+            (0, _utils.updateHotspots)(this.container, this.hotspotsConfigs, this.activeImageX, this.activeImageY, this.movingDirection, this.isClicked);
+          }
+
           ctx.drawImage(image, 0, 0, this.canvas.width, this.canvas.height);
         }
       }
+
+      if (this.info) {
+        this.showImageInfo(ctx);
+      }
     }
   }, {
-    key: 'updateImageScale',
+    key: "updateImageScale",
     value: function updateImageScale(ctx) {
       var image = this.originalImagesX[this.activeImageX - 1];
 
-      if (this.movingDirection === _ci2.ORIENTATIONS.Y) {
+      if (this.movingDirection === _constants.ORIENTATIONS.Y) {
         image = this.originalImagesY[this.activeImageY - 1];
       }
 
-      var position = this.pointerCurrentPosition;
-
-      if (this.startPointerZoom) position = this.getCursorPositionInCanvas();
-
-      var imageWidth = this.canvas.width / this.devicePixelRatio;
-      var imageHeight = this.canvas.height / this.devicePixelRatio;
-
-      var width = this.canvas.width + this.zoomIntensity * (this.canvas.width / this.canvas.height);
-      var height = this.canvas.height + this.zoomIntensity;
-
+      var position = this.getCursorPositionInCanvas();
+      var imageWidth = this.canvas.width;
+      var imageHeight = this.canvas.height;
+      var width = this.canvas.width * this.zoomIntensity;
+      var height = this.canvas.height * this.zoomIntensity;
       var pointX = 0 - position.x / imageWidth * (width - this.canvas.width);
       var pointY = 0 - position.y / imageHeight * (height - this.canvas.height);
-
       ctx.drawImage(image, pointX, pointY, width, height);
     }
   }, {
-    key: 'updatePercentageInLoader',
+    key: "updatePercentageInLoader",
     value: function updatePercentageInLoader(percentage) {
@@ -837,57 +842,11 @@ if (this.loader) {
   }, {
-    key: 'onAllImagesLoaded',
-    value: function onAllImagesLoaded() {
-      this.imagesLoaded = true;
+    key: "onFirstImageLoaded",
+    value: function onFirstImageLoaded(image) {
+      if (!this.hide360Logo && !this.lazyload) this.add360ViewIcon();
+      var ctx = this.canvas.getContext("2d");
+      ctx.scale(this.devicePixelRatio, this.devicePixelRatio);
+      this.updateContainerAndCanvasSize(image);
 
-      this.container.style.cursor = 'grab';
-      if (this.disableDrag) this.container.style.cursor = 'default';
-
-      this.removeLoader();
-
-      if (!this.fullscreenView) {
-        this.speedFactor = Math.floor(this.dragSpeed / 150 * 36 / this.amountX * 25 * this.container.offsetWidth / 1500) || 1;
-      } else {
-        var containerRatio = this.container.offsetHeight / this.container.offsetWidth;
-        var imageOffsetWidth = this.container.offsetWidth;
-
-        if (this.ratio > containerRatio) {
-          imageOffsetWidth = this.container.offsetHeight / this.ratio;
-        }
-
-        this.speedFactor = Math.floor(this.dragSpeed / 150 * 36 / this.amountX * 25 * imageOffsetWidth / 1500) || 1;
-      }
-
-      if (this.imageOffset) {
-        this.activeImageX = this.imageOffset;
-      };
-
-      if (this.autoplay) {
-        this.play();
-      }
-
-      if (this.view360Icon) {
-        this.view360Icon.innerText = '';
-        (0, _ci.setView360Icon)(this.view360Icon, this.logoSrc);
-      }
-
-      this.initControls();
-    }
-  }, {
-    key: 'onFirstImageLoaded',
-    value: function onFirstImageLoaded(event) {
-      var _this2 = this;
-
-      if (!this.hide360Logo) {
-        this.add360ViewIcon();
-      }
-
       if (this.fullscreenView) {
-        this.canvas.width = window.innerWidth * this.devicePixelRatio;
-        this.canvas.style.width = window.innerWidth + 'px';
-        this.canvas.height = window.innerHeight * this.devicePixelRatio;
-        this.canvas.style.height = window.innerHeight + 'px';
-
-        var ctx = this.canvas.getContext("2d");
-
-        var _contain2 = (0, _ci.contain)(this.canvas.width, this.canvas.height, event.target.width, event.target.height),
+        var _contain2 = (0, _utils.contain)(this.canvas.width, this.canvas.height, image.width, image.height),
             offsetX = _contain2.offsetX,
@@ -898,58 +857,17 @@ offsetY = _contain2.offsetY,
 
-        this.offset = { x: offsetX, y: offsetY };
-
-        ctx.drawImage(event.target, offsetX, offsetY, width, height);
+        this.offset = {
+          x: offsetX,
+          y: offsetY
+        };
+        this.addCloseFullscreenView();
+        ctx.drawImage(image, offsetX, offsetY, width, height);
       } else {
-        var _ctx = this.canvas.getContext("2d");
-        var imagePreview = event.target;
-
-        if (this.imageOffset) {
-          imagePreview = this.imagesX[this.imageOffset];
-        }
-
-        if (this.container.offsetWidth === 0) {
-          var modalRef = this.container.parentElement;
-
-          this.canvas.width = parseInt(modalRef.style.width) * this.devicePixelRatio;
-          this.canvas.style.width = modalRef.style.width;
-
-          this.canvas.height = parseInt(modalRef.style.height) * this.devicePixelRatio / event.target.width * event.target.height;
-          this.canvas.style.height = parseInt(modalRef.style.width) / event.target.width * event.target.height + 'px';
-        }
-
-        if (this.container.offsetWidth > 0) {
-          this.canvas.width = this.container.offsetWidth * this.devicePixelRatio;
-          this.canvas.style.width = this.container.offsetWidth + 'px';
-
-          this.canvas.height = this.container.offsetWidth * this.devicePixelRatio / event.target.width * event.target.height;
-          this.canvas.style.height = this.container.offsetWidth / event.target.width * event.target.height + 'px';
-        }
-
-        _ctx.drawImage(imagePreview, 0, 0, this.canvas.width, this.canvas.height);
+        ctx.drawImage(image, 0, 0, this.canvas.width, this.canvas.height);
       }
 
-      if (this.lazyload && !this.fullscreenView) {
-        this.imagesX.forEach(function (image, index) {
-          if (index === 0) {
-            _this2.innerBox.removeChild(_this2.lazyloadInitImage);
-            return;
-          }
-
-          var dataSrc = image.getAttribute('data-src');
-
-          if (dataSrc) {
-            image.src = image.getAttribute('data-src');
-          }
-        });
+      if (this.info) {
+        this.showImageInfo(ctx);
       }
 
-      if (this.ratio) {
-        this.container.style.minHeight = 'auto';
-      }
-
-      if (this.fullscreenView) {
-        this.addCloseFullscreenView();
-      }
-
-      if (this.magnifier && !this.fullscreenView || this.magnifyInFullscreen) {
+      if (this.magnifier) {
         this.addMagnifier();
@@ -959,3 +877,3 @@ }
       if (this.boxShadow && !this.fullscreenView) {
-        this.addBoxShadow();
+        this.boxShadowEl = (0, _utils.createBoxShadow)(this.boxShadow, this.innerBox);
       }
@@ -971,135 +889,51 @@
 
-      if (!this.isMobile && !this.fullscreenView && !this.disablePointerZoom) {
-        this.addResetZoomIcon();
+      if (this.hotspotsConfigs && !this.autoplay) {
+        (0, _utils.updateHotspots)(this.container, this.hotspotsConfigs, this.activeImageX, this.activeImageY, this.movingDirection);
       }
     }
   }, {
-    key: 'incrementLoadedImages',
-    value: function incrementLoadedImages(orientation) {
-      if (orientation === _ci2.ORIENTATIONS.Y) {
-        this.loadedImagesY += 1;
+    key: "onAllImagesLoaded",
+    value: function onAllImagesLoaded() {
+      this.removeLoader();
+      this.imagesLoaded = true;
+
+      if (this.autoplay && this.pointerZoom) {
+        this.container.style.cursor = 'zoom-in';
       } else {
-        this.loadedImagesX += 1;
+        this.container.style.cursor = 'grab';
       }
-    }
-  }, {
-    key: 'onImageLoad',
-    value: function onImageLoad(index, orientation, event) {
-      this.incrementLoadedImages(orientation);
 
-      var totalAmount = this.amountX + this.amountY;
-      var totalLoadedImages = this.loadedImagesX + this.loadedImagesY;
+      this.speedFactor = (0, _utils.getSpeedFactor)(this.dragSpeed, this.amountX, this.container.offsetWidth);
 
-      var percentage = Math.round(totalLoadedImages / totalAmount * 100);
-
-      this.updatePercentageInLoader(percentage);
-
-      if (index === 0 && orientation !== _ci2.ORIENTATIONS.Y) {
-        this.onFirstImageLoaded(event);
+      if (this.autoplay) {
+        this.play();
       }
 
-      if (totalLoadedImages === totalAmount) {
-        this.onAllImagesLoaded(event);
+      if (this.disableDrag) {
+        this.container.style.cursor = 'default';
       }
-    }
-  }, {
-    key: 'addCloseFullscreenView',
-    value: function addCloseFullscreenView(event) {
-      var closeFullscreenIcon = document.createElement('div');
-      closeFullscreenIcon.className = 'cloudimage-360-close-fullscreen-icon';
-      closeFullscreenIcon.onclick = this.setFullscreenEvents.bind(this, event);
 
-      window.onkeyup = this.setFullscreenEvents.bind(this, event);
+      if (this.view360Icon) {
+        this.view360Icon.innerText = ''; //TODO [deprecated]: remove setView360Icon in the upcoming versions
 
-      this.iconsContainer.appendChild(closeFullscreenIcon);
-    }
-  }, {
-    key: 'add360ViewIcon',
-    value: function add360ViewIcon() {
-      var view360Icon = document.createElement('div');
+        if (this.logoSrc) (0, _ci.setView360Icon)(this.view360Icon, this.logoSrc);
+      }
 
-      view360Icon.className = 'cloudimage-360-view-360-icon';
-      view360Icon.innerText = '0%';
+      this.initControls();
 
-      this.view360Icon = view360Icon;
-      this.innerBox.appendChild(view360Icon);
+      if (this.hotspotsConfigs && !this.autoplay) {
+        (0, _utils.updateHotspots)(this.container, this.hotspotsConfigs, this.activeImageX, this.activeImageY, this.movingDirection);
+      }
     }
   }, {
-    key: 'addFullscreenIcon',
-    value: function addFullscreenIcon() {
-      var fullscreenIcon = document.createElement('div');
-
-      fullscreenIcon.className = 'cloudimage-360-fullscreen-icon';
-      fullscreenIcon.onclick = this.openFullscreenModal.bind(this);
-
-      this.fullscreenIcon = fullscreenIcon;
-
-      this.iconsContainer.appendChild(fullscreenIcon);
-    }
-  }, {
-    key: 'hideFullscreenIcon',
-    value: function hideFullscreenIcon() {
-      if (!this.fullscreenIcon) return;
-
-      this.fullscreenIcon.style.opacity = '0.4';
-      this.fullscreenIcon.style.pointerEvents = 'none';
-    }
-  }, {
-    key: 'showFullscreenIcon',
-    value: function showFullscreenIcon() {
-      if (!this.fullscreenIcon) return;
-
-      this.fullscreenIcon.style.opacity = '1';
-      this.fullscreenIcon.style.pointerEvents = 'auto';
-    }
-  }, {
-    key: 'addMagnifier',
-    value: function addMagnifier() {
-      var magnifyIcon = document.createElement('div');
-
-      magnifyIcon.className = 'cloudimage-360-magnifier-icon';
-      magnifyIcon.onclick = this.magnify.bind(this);
-
-      this.magnifierIcon = magnifyIcon;
-
-      this.iconsContainer.appendChild(magnifyIcon);
-    }
-  }, {
-    key: 'disableMagnifierIcon',
-    value: function disableMagnifierIcon() {
-      if (!this.magnifierIcon) return;
-
-      this.magnifierIcon.style.opacity = '0.4';
-      this.magnifierIcon.style.pointerEvents = 'none';
-    }
-  }, {
-    key: 'enableMagnifierIcon',
-    value: function enableMagnifierIcon() {
-      if (!this.magnifierIcon) return;
-
-      this.magnifierIcon.style.opacity = '1';
-      this.magnifierIcon.style.pointerEvents = 'auto';
-    }
-  }, {
-    key: 'getOriginalSrc',
-    value: function getOriginalSrc() {
-      var currentImage = this.originalImagesX[this.activeImageX - 1];
-
-      if (this.movingDirection === _ci2.ORIENTATIONS.Y) {
-        currentImage = this.originalImagesY[this.activeImageY - 1];
-      };
-
-      return currentImage.src;
-    }
-  }, {
-    key: 'magnify',
-    value: function magnify() {
+    key: "magnify",
+    value: function magnify(event) {
       var _this3 = this;
 
-      var image = new Image();
-      var src = this.getOriginalSrc();
+      event.stopPropagation();
+      if (this.mouseTracked) this.togglePointerZoom();
+      var currentOriginalImage = (0, _utils.getCurrentOriginalImage)(this.movingDirection, this.imagesX, this.imagesY, this.activeImageX, this.activeImageY);
       this.isMagnifyOpen = true;
 
-      image.src = src;
-      image.onload = function () {
+      currentOriginalImage.onload = function () {
         if (_this3.glass) {
@@ -1112,10 +946,8 @@ _this3.glass.style.cursor = 'none';
       this.container.style.overflow = 'hidden';
-
-      (0, _ci.magnify)(this.container, this.offset, src, this.glass, this.magnifier || 3);
+      (0, _utils.magnify)(this.container, this.offset, currentOriginalImage, this.glass, this.magnifier || 3);
     }
   }, {
-    key: 'closeMagnifier',
+    key: "closeMagnifier",
     value: function closeMagnifier() {
       if (!this.glass) return;
-
       this.container.style.overflow = 'visible';
@@ -1127,170 +959,25 @@ this.container.removeChild(this.glass);
   }, {
-    key: 'openFullscreenModal',
-    value: function openFullscreenModal() {
-      var fullscreenModal = document.createElement('div');
-
-      fullscreenModal.className = 'cloudimage-360-fullscreen-modal';
-
-      var fullscreenContainer = this.container.cloneNode();
-      var image = this.imagesX[0];
-      var ratio = image.height / image.width;
-
-      fullscreenContainer.style.height = '100%';
-      fullscreenContainer.style.maxHeight = '100%';
-
-      fullscreenModal.appendChild(fullscreenContainer);
-
-      window.document.body.style.overflow = 'hidden';
-      window.document.body.appendChild(fullscreenModal);
-
-      new CI360Viewer(fullscreenContainer, true, ratio);
+    key: "openFullscreenModal",
+    value: function openFullscreenModal(event) {
+      event.stopPropagation();
+      if (this.mouseTracked) this.togglePointerZoom();
+      var fullscreenContainer = (0, _utils.createFullscreenModal)(this.container);
+      new CI360Viewer(fullscreenContainer, true, this.hotspotsConfigs);
     }
   }, {
-    key: 'setFullscreenEvents',
+    key: "setFullscreenEvents",
     value: function setFullscreenEvents(_, event) {
-      if (event.type === 'click') return this.closeFullscreenModal();
-      if (event.key === 'Escape') return this.closeFullscreenModalOnEsc();
-    }
-  }, {
-    key: 'closeFullscreenModalOnEsc',
-    value: function closeFullscreenModalOnEsc() {
+      if (event.type === 'click') return this.closeFullscreenModal(event);
 
-      if (this.container.parentNode.parentNode === document.body) {
-        this.closeFullscreenModal();
-      };
+      if (event.key === 'Escape' && this.container.parentNode.parentNode === document.body) {
+        this.closeFullscreenModalOnEsc(event);
+      }
     }
   }, {
-    key: 'closeFullscreenModal',
-    value: function closeFullscreenModal() {
-      document.body.removeChild(this.container.parentNode);
-      window.document.body.style.overflow = 'visible';
+    key: "closeFullscreenModalOnEsc",
+    value: function closeFullscreenModalOnEsc(event) {
+      this.closeFullscreenModal(event);
     }
   }, {
-    key: 'add360ViewCircleIcon',
-    value: function add360ViewCircleIcon() {
-      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.style.bottom = this.bottomCircleOffset + '%';
-      view360CircleIcon.className = 'cloudimage-360-view-360-circle';
-
-      this.view360CircleIcon = view360CircleIcon;
-      this.innerBox.appendChild(view360CircleIcon);
-    }
-  }, {
-    key: 'hide360ViewCircleIcon',
-    value: function hide360ViewCircleIcon() {
-      if (!this.view360CircleIcon) return;
-
-      this.view360CircleIcon.style.opacity = '0';
-    }
-  }, {
-    key: 'show360ViewCircleIcon',
-    value: function show360ViewCircleIcon() {
-      if (!this.view360CircleIcon) return;
-
-      this.view360CircleIcon.style.opacity = '1';
-    }
-  }, {
-    key: 'remove360ViewCircleIcon',
-    value: function remove360ViewCircleIcon() {
-      if (!this.view360CircleIcon) return;
-
-      this.innerBox.removeChild(this.view360CircleIcon);
-      this.view360CircleIcon = null;
-    }
-  }, {
-    key: 'addResetZoomIcon',
-    value: function addResetZoomIcon() {
-      var resetZoomIcon = document.createElement('div');
-
-      resetZoomIcon.className = 'cloudimage-360-reset-zoom-icon';
-      this.resetZoomIcon = resetZoomIcon;
-
-      resetZoomIcon.onmouseenter = this.resetZoom.bind(this);
-
-      this.iconsContainer.appendChild(resetZoomIcon);
-    }
-  }, {
-    key: 'hideResetZoomIcon',
-    value: function hideResetZoomIcon() {
-      if (!this.resetZoomIcon) return;
-      if (this.magnifierIcon) this.enableMagnifierIcon();
-      if (this.fullscreenIcon) this.showFullscreenIcon();
-
-      this.resetZoomIcon.style.display = 'none';
-    }
-  }, {
-    key: 'showResetZoomIcon',
-    value: function showResetZoomIcon() {
-      if (!this.resetZoomIcon) return;
-      if (this.magnifierIcon) this.disableMagnifierIcon();
-      if (this.fullscreenIcon) this.hideFullscreenIcon();
-
-      this.resetZoomIcon.style.display = 'block';
-    }
-  }, {
-    key: 'addLoader',
-    value: function addLoader() {
-      var loader = document.createElement('div');
-      loader.className = 'cloudimage-360-loader';
-
-      this.loader = loader;
-      this.innerBox.appendChild(loader);
-    }
-  }, {
-    key: 'addBoxShadow',
-    value: function addBoxShadow() {
-      var boxShadow = document.createElement('div');
-
-      boxShadow.className = 'cloudimage-360-box-shadow';
-      boxShadow.style.boxShadow = this.boxShadow;
-
-      this.innerBox.appendChild(boxShadow);
-    }
-  }, {
-    key: 'removeLoader',
-    value: function removeLoader() {
-      if (!this.loader) return;
-
-      this.innerBox.removeChild(this.loader);
-      this.loader = null;
-    }
-  }, {
-    key: 'remove360ViewIcon',
-    value: function remove360ViewIcon() {
-      if (!this.view360Icon) return;
-
-      this.innerBox.removeChild(this.view360Icon);
-      this.view360Icon = null;
-    }
-  }, {
-    key: 'isCompletedCyle',
-    value: function isCompletedCyle() {
-      switch (this.autoplayBehavior) {
-        case _ci2.AUTOPLAY_BEHAVIOR.SPIN_XY:
-        case _ci2.AUTOPLAY_BEHAVIOR.SPIN_Y:
-          {
-            var isReachedTheEdge = this.reversed ? this.activeImageY === 1 : this.activeImageY === this.amountY;
-
-            if (isReachedTheEdge) return true;
-
-            return false;
-          }
-
-        case _ci2.AUTOPLAY_BEHAVIOR.SPIN_X:
-        case _ci2.AUTOPLAY_BEHAVIOR.SPIN_YX:
-        default:
-          {
-            var _isReachedTheEdge = this.reversed ? this.activeImageX === 1 : this.activeImageX === this.amountX;
-
-            if (_isReachedTheEdge) return true;
-
-            return false;
-          }
-      }
-    }
-  }, {
-    key: 'play',
+    key: "play",
     value: function play() {
@@ -1301,10 +988,21 @@ var _this4 = this;
       this.remove360ViewIcon();
-
       this.loopTimeoutId = window.setInterval(function () {
         _this4.loop(_this4.reversed);
 
-        var isPlayedOnce = _this4.isCompletedCyle();
+        var isPlayedOnce = (0, _utils.isCompletedOneCycle)(_this4.autoplayBehavior, _this4.activeImageX, _this4.activeImageY, _this4.amountX, _this4.amountY, _this4.reversed);
 
         if (_this4.playOnce && isPlayedOnce) {
           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);
+          }
         }
@@ -1314,115 +1012,43 @@ }, this.autoplaySpeed);
   }, {
-    key: 'stop',
+    key: "stop",
     value: function stop() {
-      if (this.bottomCircle && !this.zoomIntensity) this.show360ViewCircleIcon();
+      if (this.bottomCircle) this.show360ViewCircleIcon();
       window.clearTimeout(this.loopTimeoutId);
     }
   }, {
-    key: 'getSrc',
-    value: function getSrc(responsive, container, folder, filename, _ref) {
-      var ciToken = _ref.ciToken,
-          ciFilters = _ref.ciFilters,
-          ciTransformation = _ref.ciTransformation;
-
-      var src = '' + folder + filename;
-
-      if (responsive) {
-        var imageOffsetWidth = container.offsetWidth;
-
-        if (this.fullscreenView) {
-          var containerRatio = container.offsetHeight / container.offsetWidth;
-
-          if (this.ratio > containerRatio) {
-            imageOffsetWidth = container.offsetHeight / this.ratio;
-          }
-        }
-
-        var ciSizeNext = (0, _ci.getSizeAccordingToPixelRatio)((0, _ci.getResponsiveWidthOfContainer)(imageOffsetWidth));
-
-        src = 'https://' + ciToken + '.cloudimg.io/v7/' + src + '?' + (ciTransformation ? ciTransformation : 'width=' + ciSizeNext) + (ciFilters ? '&f=' + ciFilters : '');
-      }
-
-      return src;
-    }
-  }, {
-    key: 'preloadImages',
-    value: function preloadImages(amount, src) {
-      var orientation = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _ci2.ORIENTATIONS.X;
-      var lazyload = arguments[3];
-      var lazySelector = arguments[4];
-      var container = arguments[5];
-
+    key: "updateView",
+    value: function updateView(forceUpdate, viewers) {
       var _this5 = this;
 
-      var responsive = arguments[6];
-      var ciParams = arguments[7];
+      var container = this.container;
+      var imageProps = (0, _ci.get360ViewProps)(container);
+      var srcPropsChanged = (0, _utils.isPropsChangeRequireReload)(this, imageProps);
+      var reInitView = srcPropsChanged || forceUpdate;
 
-      if (this.imageList) {
-        try {
-          var images = JSON.parse(this.imageList);
-
-          this.amountX = images.length;
-          images.forEach(function (src, index) {
-            var folder = /(http(s?)):\/\//gi.test(src) ? '' : _this5.folder;
-            var resultSrc = _this5.getSrc(responsive, container, folder, src, ciParams);
-            var lastIndex = resultSrc.lastIndexOf('//');
-            var originalSrc = resultSrc.slice(lastIndex);
-
-            _this5.addImage(resultSrc, originalSrc, orientation, lazyload, lazySelector, index);
-          });
-        } catch (error) {
-          console.error('Wrong format in image-list attribute: ' + error.message);
-        }
-      } else {
-        [].concat(_toConsumableArray(new Array(amount))).map(function (_item, index) {
-          var nextZeroFilledIndex = (0, _ci.pad)(index + 1, _this5.indexZeroBase);
-          var resultSrc = src.replace('{index}', nextZeroFilledIndex);
-          var originalSrc = resultSrc.replace(_ci2.ORGINAL_SIZE_REGEX, '').replace(_ci2.AND_SYMBOL_REGEX, '?');
-
-          _this5.addImage(resultSrc, originalSrc, orientation, lazyload, lazySelector, index);
+      if (reInitView) {
+        var oldElement = this.container;
+        var viewIndex = viewers.findIndex(function (view) {
+          return view.id === _this5.container.id;
         });
+        container.removeChild(this.innerBox);
+        container = container.cloneNode(true);
+        container.className = container.className.replace(' initialized', '');
+        oldElement.parentNode.replaceChild(container, oldElement);
+        return viewers.splice(viewIndex, 1, new CI360Viewer(container));
       }
-    }
-  }, {
-    key: 'addImage',
-    value: function addImage(resultSrc, originalSrc, orientation, lazyload, lazySelector, index) {
-      var image = new Image();
-      var originalImage = new Image();
 
-      if (lazyload && !this.fullscreenView) {
-        image.setAttribute('data-src', resultSrc);
-        image.className = image.className.length ? image.className + (' ' + lazySelector) : lazySelector;
-
-        if (index === 0) {
-          this.lazyloadInitImage = image;
-          image.style.position = 'absolute';
-          image.style.top = '0';
-          image.style.left = '0';
-          this.innerBox.appendChild(image);
-        }
-      } else {
-        image.src = resultSrc;
-        originalImage.src = originalSrc;
-      }
-
-      image.onload = this.onImageLoad.bind(this, index, orientation);
-      image.onerror = this.onImageLoad.bind(this, index, orientation);
-
-      if (orientation === _ci2.ORIENTATIONS.Y) {
-        this.imagesY.push(image);
-        this.originalImagesY.push(originalImage);
-      } else {
-        this.imagesX.push(image);
-        this.originalImagesX.push(originalImage);
-      }
+      container.style.position = 'relative';
+      container.style.width = '100%';
+      container.style.cursor = 'default';
+      container.setAttribute('draggable', 'false');
+      this.stop();
+      this.init(container, true);
     }
   }, {
-    key: 'destroy',
+    key: "destroy",
     value: function destroy() {
       stop();
-
       var oldElement = this.container;
       var newElement = oldElement.cloneNode(true);
       var innerBox = newElement.querySelector('.cloudimage-360-inner-box');
-
       newElement.className = newElement.className.replace(' initialized', '');
@@ -1438,26 +1064,128 @@ newElement.style.position = 'relative';
   }, {
-    key: 'initControls',
+    key: "addCloseFullscreenView",
+    value: function addCloseFullscreenView(event) {
+      var closeFullscreenIcon = (0, _utils.createCloseFullscreenIcon)();
+      closeFullscreenIcon.onclick = this.setFullscreenEvents.bind(this, event);
+      window.onkeyup = this.setFullscreenEvents.bind(this, event);
+      this.iconsContainer.appendChild(closeFullscreenIcon);
+    }
+  }, {
+    key: "add360ViewIcon",
+    value: function add360ViewIcon() {
+      this.view360Icon = (0, _utils.create360ViewIcon)();
+      this.innerBox.appendChild(this.view360Icon);
+    }
+  }, {
+    key: "addFullscreenIcon",
+    value: function addFullscreenIcon() {
+      this.fullscreenIcon = (0, _utils.createFullscreenIcon)();
+      this.fullscreenIcon.onclick = this.openFullscreenModal.bind(this);
+      this.iconsContainer.appendChild(this.fullscreenIcon);
+    }
+  }, {
+    key: "showFullscreenIcon",
+    value: function showFullscreenIcon() {
+      if (!this.fullscreenIcon) return;
+      this.fullscreenIcon.style.display = 'block';
+      this.fullscreenIcon.style.pointerEvents = 'auto';
+    }
+  }, {
+    key: "hideFullscreenIcon",
+    value: function hideFullscreenIcon() {
+      if (!this.fullscreenIcon) return;
+      this.fullscreenIcon.style.display = 'none';
+      this.fullscreenIcon.style.pointerEvents = 'none';
+    }
+  }, {
+    key: "addMagnifier",
+    value: function addMagnifier() {
+      this.magnifierIcon = (0, _utils.createMagnifierIcon)();
+      this.magnifierIcon.onclick = this.magnify.bind(this);
+      this.iconsContainer.appendChild(this.magnifierIcon);
+    }
+  }, {
+    key: "enableMagnifierIcon",
+    value: function enableMagnifierIcon() {
+      if (!this.magnifierIcon) return;
+      this.magnifierIcon.style.display = 'block';
+      this.magnifierIcon.style.pointerEvents = 'auto';
+    }
+  }, {
+    key: "disableMagnifierIcon",
+    value: function disableMagnifierIcon() {
+      if (!this.magnifierIcon) return;
+      this.magnifierIcon.style.display = 'none';
+      this.magnifierIcon.style.pointerEvents = 'none';
+    }
+  }, {
+    key: "closeFullscreenModal",
+    value: function closeFullscreenModal(event) {
+      event.stopPropagation();
+      document.body.removeChild(this.container.parentNode);
+      window.document.body.style.overflow = 'visible';
+    }
+  }, {
+    key: "add360ViewCircleIcon",
+    value: function add360ViewCircleIcon() {
+      this.view360CircleIcon = (0, _utils.create360ViewCircleIcon)(this.bottomCircleOffset);
+      this.innerBox.appendChild(this.view360CircleIcon);
+    }
+  }, {
+    key: "show360ViewCircleIcon",
+    value: function show360ViewCircleIcon() {
+      if (!this.view360CircleIcon) return;
+      this.view360CircleIcon.style.opacity = '1';
+    }
+  }, {
+    key: "hide360ViewCircleIcon",
+    value: function hide360ViewCircleIcon() {
+      if (!this.view360CircleIcon) return;
+      this.view360CircleIcon.style.opacity = '0';
+    }
+  }, {
+    key: "remove360ViewCircleIcon",
+    value: function remove360ViewCircleIcon() {
+      if (!this.view360CircleIcon) return;
+      this.innerBox.removeChild(this.view360CircleIcon);
+      this.view360CircleIcon = null;
+    }
+  }, {
+    key: "removeLoader",
+    value: function removeLoader() {
+      if (!this.loader) return;
+      this.innerBox.removeChild(this.loader);
+      this.loader = null;
+    }
+  }, {
+    key: "remove360ViewIcon",
+    value: function remove360ViewIcon() {
+      if (!this.view360Icon) return;
+
+      try {
+        this.innerBox.removeChild(this.view360Icon);
+        this.view360Icon = null;
+      } catch (_unused) {}
+    }
+  }, {
+    key: "initControls",
     value: function initControls() {
       var _this6 = this;
 
-      var isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse;
-      // TODO [deprecated]: remove .cloud-360-left, .cloud-360-right in the upcoming versions
-      var left = this.container.querySelector('.cloudimage-360-left') || this.container.querySelector('.cloudimage-360-prev');
-      var right = this.container.querySelector('.cloudimage-360-right') || this.container.querySelector('.cloudimage-360-next');
-
-      var top = this.container.querySelector('.cloudimage-360-top');
-      var bottom = this.container.querySelector('.cloudimage-360-bottom');
-
-      if (!left && !right && !top && !bottom) return;
-
       var onLeftStart = function onLeftStart(event) {
         event.stopPropagation();
+
         _this6.onSpin();
+
         _this6.left();
+
         _this6.loopTimeoutId = window.setInterval(_this6.left.bind(_this6), _this6.autoplaySpeed);
       };
+
       var onRightStart = function onRightStart(event) {
         event.stopPropagation();
+
         _this6.onSpin();
+
         _this6.right();
+
         _this6.loopTimeoutId = window.setInterval(_this6.right.bind(_this6), _this6.autoplaySpeed);
@@ -1468,4 +1196,7 @@ };
         event.stopPropagation();
+
         _this6.onSpin();
+
         _this6.top();
+
         _this6.loopTimeoutId = window.setInterval(_this6.top.bind(_this6), _this6.autoplaySpeed);
@@ -1476,114 +1207,45 @@ };
         event.stopPropagation();
+
         _this6.onSpin();
+
         _this6.bottom();
+
         _this6.loopTimeoutId = window.setInterval(_this6.bottom.bind(_this6), _this6.autoplaySpeed);
       };
 
-      var onLeftEnd = function onLeftEnd() {
+      var onEventEnd = function onEventEnd() {
         _this6.onFinishSpin();
-        window.clearTimeout(_this6.loopTimeoutId);
-      };
 
-      var onRightEnd = function onRightEnd() {
-        _this6.onFinishSpin();
         window.clearTimeout(_this6.loopTimeoutId);
       };
 
-      var onTopEnd = function onTopEnd() {
-        _this6.onFinishSpin();
-        window.clearTimeout(_this6.loopTimeoutId);
+      var controlsConfig = {
+        container: this.container,
+        controlReverse: this.controlReverse,
+        spinReverse: this.spinReverse,
+        stopAtEdges: this.stopAtEdges
       };
-
-      var onBottomEnd = function onBottomEnd() {
-        _this6.onFinishSpin();
-        window.clearTimeout(_this6.loopTimeoutId);
+      var controlsTriggers = {
+        onLeftStart: onLeftStart,
+        onRightStart: onRightStart,
+        onTopStart: onTopStart,
+        onBottomStart: onBottomStart,
+        onEventEnd: onEventEnd
       };
-
-      if (left) {
-        left.style.display = 'block';
-        left.addEventListener('mousedown', isReverse ? onRightStart : onLeftStart);
-        left.addEventListener('touchstart', isReverse ? onRightStart : onLeftStart, { passive: true });
-        left.addEventListener('mouseup', isReverse ? onRightEnd : onLeftEnd);
-        left.addEventListener('touchend', isReverse ? onRightEnd : onLeftEnd);
-
-        this.leftElem = left;
-      }
-
-      if (right) {
-        right.style.display = 'block';
-        right.addEventListener('mousedown', isReverse ? onLeftStart : onRightStart);
-        right.addEventListener('touchstart', isReverse ? onLeftStart : onRightStart, { passive: true });
-        right.addEventListener('mouseup', isReverse ? onLeftEnd : onRightEnd);
-        right.addEventListener('touchend', isReverse ? onLeftEnd : onRightEnd);
-
-        this.rightElem = right;
-      }
-
-      if (top) {
-        top.style.display = 'block';
-        top.addEventListener('mousedown', isReverse ? onBottomStart : onTopStart);
-        top.addEventListener('touchstart', isReverse ? onBottomStart : onTopStart);
-        top.addEventListener('mouseup', isReverse ? onBottomEnd : onTopEnd);
-        top.addEventListener('touchend', isReverse ? onBottomEnd : onTopEnd);
-
-        this.topElem = top;
-      }
-
-      if (bottom) {
-        bottom.style.display = 'block';
-        bottom.addEventListener('mousedown', isReverse ? onTopStart : onBottomStart);
-        bottom.addEventListener('touchstart', isReverse ? onTopStart : onBottomStart);
-        bottom.addEventListener('mouseup', isReverse ? onTopEnd : onBottomEnd);
-        bottom.addEventListener('touchend', isReverse ? onTopEnd : onBottomEnd);
-
-        this.bottomElem = bottom;
-      }
-
-      if (isReverse ? right : left) {
-        if (this.stopAtEdges) {
-          (0, _ci.addClass)(isReverse ? right : left, 'not-active');
-        }
-      }
+      var controlsElements = (0, _utils.initControls)(controlsConfig, controlsTriggers);
+      this.topElem = controlsElements.top;
+      this.bottomElem = controlsElements.bottom;
+      this.leftElem = controlsElements.left;
+      this.rightElem = controlsElements.right;
     }
   }, {
-    key: 'addInnerBox',
-    value: function addInnerBox() {
-      this.innerBox = document.createElement('div');
-      this.innerBox.className = 'cloudimage-360-inner-box';
-      this.container.appendChild(this.innerBox);
-    }
-  }, {
-    key: 'addIconsContainer',
-    value: function addIconsContainer() {
-      this.iconsContainer = document.createElement('div');
-      this.iconsContainer.className = 'cloudimage-360-icons-container';
-
-      this.innerBox.appendChild(this.iconsContainer);
-    }
-  }, {
-    key: 'addCanvas',
-    value: function addCanvas() {
-      this.canvas = document.createElement('canvas');
-      this.canvas.style.width = '100%';
-      this.canvas.style.fontSize = '0';
-
-      if (this.ratio) {
-        this.container.style.minHeight = this.container.offsetWidth * this.ratio + 'px';
-        this.canvas.height = parseInt(this.container.style.minHeight);
-      }
-
-      this.innerBox.appendChild(this.canvas);
-    }
-  }, {
-    key: 'attachEvents',
+    key: "attachEvents",
     value: function attachEvents(draggable, swipeable, keys) {
-      var _this7 = this;
+      window.addEventListener('resize', this.requestResizedImages.bind(this));
 
-      window.addEventListener('resize', (0, _ci.debounce)(function () {
-        _this7.requestResizedImages();
-      }, 300));
-
       if (draggable && !this.disableDrag) {
+        this.container.addEventListener('click', this.mouseClick.bind(this));
         this.container.addEventListener('mousedown', this.mouseDown.bind(this));
         this.container.addEventListener('mousemove', this.mouseMove.bind(this));
+        this.container.addEventListener('mouseleave', this.mouseLeave.bind(this));
         document.addEventListener('mouseup', this.mouseUp.bind(this));
@@ -1593,64 +1255,39 @@ }
       if (swipeable && !this.disableDrag) {
-        this.container.addEventListener('touchstart', this.touchStart.bind(this), { passive: true });
+        this.container.addEventListener('touchstart', this.touchStart.bind(this), {
+          passive: true
+        });
         this.container.addEventListener('touchend', this.touchEnd.bind(this));
-        this.container.addEventListener('touchmove', this.touchMove.bind(this), { passive: true });
+        this.container.addEventListener('touchmove', this.touchMove.bind(this));
       }
 
-      if (!this.disablePointerZoom && !this.fullscreenView) {
-        this.container.addEventListener('wheel', this.mouseScroll.bind(this));
-      }
-
       if (keys) {
         document.addEventListener('keydown', this.keyDown.bind(this));
         document.addEventListener('keyup', this.keyUp.bind(this));
-      } else {
-        document.addEventListener('keydown', this.keyDownGeneral.bind(this));
       }
+
+      document.addEventListener('keydown', this.keyDownGeneral.bind(this));
     }
   }, {
-    key: 'applyStylesToContainer',
-    value: function applyStylesToContainer() {
-      this.container.style.position = 'relative';
-      this.container.style.width = '100%';
-      this.container.style.cursor = 'wait';
-      this.container.setAttribute('draggable', 'false');
-      this.container.className = this.container.className + ' initialized';
-    }
-  }, {
-    key: 'setMouseLeaveActions',
-    value: function setMouseLeaveActions(actions) {
-      var _this8 = this;
+    key: "init",
+    value: function init(container) {
+      var _this7 = this;
 
-      var mouseLeaveActions = actions.split(',');
+      var update = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
-      mouseLeaveActions.forEach(function (action) {
-        return _this8.applyMouseLeaveAction(action);
-      });
-    }
-  }, {
-    key: 'applyMouseLeaveAction',
-    value: function applyMouseLeaveAction(action) {
-      switch (action) {
-        case _ci2.MOUSE_LEAVE_ACTIONS.RESET_ZOOM:
-          this.container.addEventListener('mouseleave', this.resetZoom.bind(this));
-          break;
-      }
-    }
-  }, {
-    key: 'init',
-    value: function init(container) {
       var _get360ViewProps = (0, _ci.get360ViewProps)(container),
           folder = _get360ViewProps.folder,
+          apiVersion = _get360ViewProps.apiVersion,
           filenameX = _get360ViewProps.filenameX,
           filenameY = _get360ViewProps.filenameY,
-          imageList = _get360ViewProps.imageList,
+          imageListX = _get360ViewProps.imageListX,
+          imageListY = _get360ViewProps.imageListY,
           indexZeroBase = _get360ViewProps.indexZeroBase,
           amountX = _get360ViewProps.amountX,
           amountY = _get360ViewProps.amountY,
-          imageOffset = _get360ViewProps.imageOffset,
           _get360ViewProps$drag = _get360ViewProps.draggable,
-          draggable = _get360ViewProps$drag === undefined ? true : _get360ViewProps$drag,
+          draggable = _get360ViewProps$drag === void 0 ? true : _get360ViewProps$drag,
           _get360ViewProps$swip = _get360ViewProps.swipeable,
-          swipeable = _get360ViewProps$swip === undefined ? true : _get360ViewProps$swip,
+          swipeable = _get360ViewProps$swip === void 0 ? true : _get360ViewProps$swip,
           keys = _get360ViewProps.keys,
+          keysReverse = _get360ViewProps.keysReverse,
           bottomCircle = _get360ViewProps.bottomCircle,
@@ -1662,20 +1299,8 @@ bottomCircleOffset = _get360ViewProps.bottomCircleOffset,
           playOnce = _get360ViewProps.playOnce,
-          pointerZoomFactor = _get360ViewProps.pointerZoomFactor,
-          pinchZoomFactor = _get360ViewProps.pinchZoomFactor,
-          maxScale = _get360ViewProps.maxScale,
-          toStartPointerZoom = _get360ViewProps.toStartPointerZoom,
-          onMouseLeave = _get360ViewProps.onMouseLeave,
-          _get360ViewProps$disa = _get360ViewProps.disablePointerZoom,
-          disablePointerZoom = _get360ViewProps$disa === undefined ? true : _get360ViewProps$disa,
-          _get360ViewProps$disa2 = _get360ViewProps.disablePinchZoom,
-          disablePinchZoom = _get360ViewProps$disa2 === undefined ? true : _get360ViewProps$disa2,
           speed = _get360ViewProps.speed,
           autoplayReverse = _get360ViewProps.autoplayReverse,
-          _get360ViewProps$disa3 = _get360ViewProps.disableDrag,
-          disableDrag = _get360ViewProps$disa3 === undefined ? true : _get360ViewProps$disa3,
+          _get360ViewProps$disa = _get360ViewProps.disableDrag,
+          disableDrag = _get360ViewProps$disa === void 0 ? true : _get360ViewProps$disa,
           fullscreen = _get360ViewProps.fullscreen,
           magnifier = _get360ViewProps.magnifier,
-          magnifyInFullscreen = _get360ViewProps.magnifyInFullscreen,
-          ratio = _get360ViewProps.ratio,
-          responsive = _get360ViewProps.responsive,
           ciToken = _get360ViewProps.ciToken,
@@ -1691,22 +1316,26 @@ ciFilters = _get360ViewProps.ciFilters,
           hide360Logo = _get360ViewProps.hide360Logo,
-          logoSrc = _get360ViewProps.logoSrc;
+          logoSrc = _get360ViewProps.logoSrc,
+          pointerZoom = _get360ViewProps.pointerZoom,
+          ratio = _get360ViewProps.ratio,
+          _get360ViewProps$imag = _get360ViewProps.imageInfo,
+          imageInfo = _get360ViewProps$imag === void 0 ? 'black' : _get360ViewProps$imag;
 
-      var ciParams = { ciToken: ciToken, ciFilters: ciFilters, ciTransformation: ciTransformation };
-
-      this.addInnerBox();
-      this.addIconsContainer();
-      this.addLoader();
-
+      var ciParams = {
+        ciToken: ciToken,
+        ciFilters: ciFilters,
+        ciTransformation: ciTransformation
+      };
       this.folder = folder;
+      this.apiVersion = apiVersion;
       this.filenameX = filenameX;
       this.filenameY = filenameY;
-      this.imageList = imageList;
+      this.imageListX = imageListX;
+      this.imageListY = imageListY;
       this.indexZeroBase = indexZeroBase;
-      this.amountX = amountX;
-      this.amountY = amountY;
-      this.allowSpinY = !!amountY && !!filenameY;
-      this.activeImageX = autoplayReverse ? amountX : 1;
-      this.activeImageY = autoplayReverse ? amountY : 1;
-      this.spinY = autoplayBehavior === _ci2.AUTOPLAY_BEHAVIOR.SPIN_YX ? true : false;
-      this.imageOffset = imageOffset;
+      this.amountX = imageListX ? JSON.parse(imageListX).length : amountX;
+      this.amountY = imageListY ? JSON.parse(imageListY).length : amountY;
+      this.allowSpinY = !!this.amountY;
+      this.activeImageX = autoplayReverse ? this.amountX : 1;
+      this.activeImageY = autoplayReverse ? this.amountY : 1;
+      this.spinY = autoplayBehavior === _constants.AUTOPLAY_BEHAVIOR.SPIN_YX ? true : false;
       this.bottomCircle = bottomCircle;
@@ -1718,7 +1347,2 @@ this.bottomCircleOffset = bottomCircleOffset;
       this.playOnce = playOnce;
-      this.toStartPointerZoom = toStartPointerZoom, this.disablePointerZoom = disablePointerZoom;
-      this.disablePinchZoom = disablePinchZoom;
-      this.pointerZoomFactor = pointerZoomFactor;
-      this.pinchZoomFactor = pinchZoomFactor;
-      this.maxScale = maxScale;
       this.speed = speed;
@@ -1728,10 +1352,7 @@ this.reversed = autoplayReverse;
       this.fullscreen = fullscreen;
-      this.magnifier = !this.isMobile && magnifier ? magnifier : false;
-      this.magnifyInFullscreen = magnifyInFullscreen;
-      this.lazyload = lazyload;
+      this.magnifier = !this.isMobile && magnifier > 1 ? Math.min(magnifier, 5) : 0;
       this.lazySelector = lazySelector;
-      this.ratio = ratio;
       this.spinReverse = spinReverse;
       this.controlReverse = controlReverse;
-      this.dragSpeed = dragSpeed;
+      this.dragSpeed = Math.max(dragSpeed, 50);
       this.autoplaySpeed = this.speed * 36 / this.amountX;
@@ -1741,27 +1362,131 @@ this.stopAtEdges = stopAtEdges;
       this.logoSrc = logoSrc;
-      this.responsive = responsive;
       this.ciParams = ciParams;
+      this.apiVersion = apiVersion;
+      this.pointerZoom = pointerZoom > 1 ? Math.min(pointerZoom, 3) : 0;
+      this.keysReverse = keysReverse;
+      this.info = imageInfo;
+      this.keys = keys;
+      this.ratio = ratio && JSON.parse(ratio);
 
-      this.applyStylesToContainer();
+      if (update) {
+        (0, _utils.removeChildFromParent)(this.innerBox, this.iconsContainer);
+        (0, _utils.removeChildFromParent)(this.innerBox, this.boxShadowEl);
+        (0, _utils.removeChildFromParent)(this.innerBox, this.view360Icon);
+        this.remove360ViewCircleIcon();
+        this.iconsContainer = (0, _utils.createIconsContainer)(this.innerBox);
 
-      this.addCanvas();
+        if (!this.hide360Logo && !this.lazyload && this.logoSrc) {
+          this.add360ViewIcon();
+          (0, _ci.setView360Icon)(this.view360Icon, this.logoSrc);
+        }
 
-      var srcX = this.getSrc(responsive, container, folder, filenameX, ciParams);
-      var srcY = this.getSrc(responsive, container, folder, filenameY, ciParams);
+        if (this.magnifier) {
+          this.addMagnifier();
+        }
 
-      this.preloadImages(amountX, srcX, _ci2.ORIENTATIONS.X, lazyload, lazySelector, container, responsive, ciParams);
+        if (this.bottomCircle && !this.fullscreenView) {
+          this.add360ViewCircleIcon();
+        }
 
-      if (amountY) {
-        this.preloadImages(amountY, srcY, _ci2.ORIENTATIONS.Y, lazyload, lazySelector, container, responsive, ciParams);
+        if (this.fullscreen && !this.fullscreenView) {
+          this.addFullscreenIcon();
+        }
+
+        if (this.boxShadow && !this.fullscreenView) {
+          this.boxShadowEl = (0, _utils.createBoxShadow)(this.boxShadow, this.innerBox);
+        }
+
+        return this.onAllImagesLoaded();
       }
 
+      this.innerBox = (0, _utils.createInnerBox)(this.container);
+      this.iconsContainer = (0, _utils.createIconsContainer)(this.innerBox);
+      this.canvas = (0, _utils.createCanvas)(this.innerBox);
+      this.loader = (0, _utils.createLoader)(this.innerBox);
+
+      if (this.hotspotsConfigs && !this.fullscreenView) {
+        (0, _utils.createHotspots)(container, this.hotspotsConfigs);
+      }
+
+      (0, _utils.applyStylesToContainer)(this.container);
+      this.srcXConfig = {
+        folder: folder,
+        filename: filenameX,
+        imageList: imageListX,
+        container: container,
+        innerBox: this.innerBox,
+        apiVersion: apiVersion,
+        ciParams: ciParams,
+        lazySelector: lazySelector,
+        amount: this.amountX,
+        indexZeroBase: indexZeroBase,
+        fullscreen: this.fullscreenView
+      };
+      this.srcYConfig = _objectSpread(_objectSpread({}, this.srcXConfig), {}, {
+        filename: filenameY,
+        orientation: _constants.ORIENTATIONS.Y,
+        imageList: imageListY,
+        amount: this.amountY
+      });
+      var srcX = (0, _utils.generateImagesPath)(this.srcXConfig);
+
+      var onImageLoad = function onImageLoad(orientation, image, index) {
+        if (orientation !== _constants.ORIENTATIONS.Y) {
+          _this7.imagesX[index] = image;
+        } else {
+          _this7.imagesY[index] = image;
+        }
+
+        var loadedXImages = _this7.imagesX.filter(function (image) {
+          return image;
+        });
+
+        var loadedYImages = _this7.imagesY.filter(function (image) {
+          return image;
+        });
+
+        var totalAmount = _this7.amountX + _this7.amountY;
+        var totalLoadedImages = loadedXImages.length + loadedYImages.length;
+        var isFirstImageLoaded = !index && orientation !== _constants.ORIENTATIONS.Y;
+        var percentage = Math.round(totalLoadedImages / totalAmount * 100);
+
+        _this7.updatePercentageInLoader(percentage);
+
+        if (isFirstImageLoaded) {
+          _this7.onFirstImageLoaded(image);
+        }
+
+        if (_this7.isReady()) {
+          _this7.onAllImagesLoaded();
+        }
+      };
+
+      var loadImages = function loadImages() {
+        (0, _utils.preloadImages)(_this7.srcXConfig, srcX, onImageLoad.bind(_this7, _constants.ORIENTATIONS.X));
+
+        if (_this7.allowSpinY) {
+          var srcY = (0, _utils.generateImagesPath)(_this7.srcYConfig);
+          (0, _utils.preloadImages)(_this7.srcYConfig, srcY, onImageLoad.bind(_this7, _constants.ORIENTATIONS.Y));
+        }
+      };
+
+      if (lazyload) {
+        var onFirstImageLoad = function onFirstImageLoad(image) {
+          _this7.innerBox.removeChild(image);
+
+          loadImages();
+        };
+
+        (0, _utils.initLazyload)(srcX, this.srcXConfig, onFirstImageLoad);
+      } else {
+        loadImages();
+      }
+
       this.attachEvents(draggable, swipeable, keys);
-
-      if (onMouseLeave) this.setMouseLeaveActions(onMouseLeave);
     }
   }]);
-
   return CI360Viewer;
 }();
 
-exports.default = CI360Viewer;
+var _default = CI360Viewer;
+exports.default = _default;

dist/ci360.utils.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
-exports.debounce = exports.normalizeZoomFactor = exports.getMaxZoomIntensity = exports.isTwoFingers = exports.pad = exports.removeClass = exports.addClass = exports.contain = exports.getSizeAccordingToPixelRatio = exports.getResponsiveWidthOfContainer = exports.magnify = exports.setView360Icon = exports.get360ViewProps = undefined;
+exports.setView360Icon = exports.isTrue = exports.get360ViewProps = exports.debounce = exports.attr = void 0;
 
-var _ci = require('./ci360.constants');
+var _constants = require("./constants");
 
+var _this = void 0;
+
 //TODO [deprecated]: remove filename, amount in the upcoming versions
@@ -15,33 +17,26 @@ var get360ViewProps = function get360ViewProps(image) {
     folder: attr(image, 'folder') || attr(image, 'data-folder') || '/',
+    apiVersion: attr(image, 'api-version') || attr(image, 'data-api-version') || attr(image, 'apiVersion') || attr(image, 'data-apiVersion') || "v7",
     filenameX: attr(image, 'filename') || attr(image, 'data-filename') || attr(image, 'filename-x') || attr(image, 'data-filename-x') || 'image-{index}.jpg',
     filenameY: attr(image, 'filename-y') || attr(image, 'data-filename-y') || 'image-y-{index}.jpg',
-    imageList: attr(image, 'image-list') || attr(image, 'data-image-list') || null,
+    imageListX: attr(image, 'image-list-x') || attr(image, 'data-image-list-x') || null,
+    imageListY: attr(image, 'image-list-y') || attr(image, 'data-image-list-y') || null,
     indexZeroBase: parseInt(attr(image, 'index-zero-base') || attr(image, 'data-index-zero-base') || 0, 10),
     amountX: parseInt(attr(image, 'amount') || attr(image, 'data-amount') || attr(image, 'amount-x') || attr(image, 'data-amount-x') || 36, 10),
     amountY: parseInt(attr(image, 'amount-y') || attr(image, 'data-amount-y') || 0, 10),
-    imageOffset: parseInt(attr(image, 'image-offset') || attr(image, 'data-image-offset')),
     speed: parseInt(attr(image, 'speed') || attr(image, 'data-speed') || 80, 10),
     dragSpeed: parseInt(attr(image, 'drag-speed') || attr(image, 'data-drag-speed') || 150, 10),
     keys: isTrue(image, 'keys'),
+    keysReverse: isTrue(image, 'keys-reverse'),
     boxShadow: attr(image, 'box-shadow') || attr(image, 'data-box-shadow'),
     autoplay: isTrue(image, 'autoplay'),
-    autoplayBehavior: attr(image, 'autoplay-behavior') || attr(image, 'data-autoplay-behavior') || _ci.AUTOPLAY_BEHAVIOR.SPIN_X,
+    autoplayBehavior: attr(image, 'autoplay-behavior') || attr(image, 'data-autoplay-behavior') || _constants.AUTOPLAY_BEHAVIOR.SPIN_X,
     playOnce: isTrue(image, 'play-once'),
-    disablePointerZoom: isTrue(image, 'disable-pointer-zoom'),
-    disablePinchZoom: isTrue(image, 'disable-pinch-zoom'),
-    onMouseLeave: attr(image, 'on-mouse-leave') || attr(image, 'data-on-mouse-leave'),
-    toStartPointerZoom: attr(image, 'to-start-pointer-zoom') || attr(image, 'data-to-start-pointer-zoom') || _ci.TO_START_POINTER_ZOOM.SCROLL_TO_START,
-    pointerZoomFactor: parseInt(attr(image, 'pointer-zoom-factor') || attr(image, 'data-pointer-zoom-factor') || 2, 10),
-    pinchZoomFactor: parseInt(attr(image, 'pinch-zoom-factor') || attr(image, 'data-pinch-zoom-factor') || 2, 10),
-    maxScale: parseFloat(attr(image, 'max-scale') || attr(image, 'data-max-scale') || 100, 10),
     autoplayReverse: isTrue(image, 'autoplay-reverse'),
+    pointerZoom: parseFloat(attr(image, 'pointer-zoom') || attr(image, 'data-pointer-zoom') || 0, 10),
     bottomCircle: isTrue(image, 'bottom-circle'),
     disableDrag: isTrue(image, 'disable-drag'),
     fullscreen: isTrue(image, 'fullscreen') || isTrue(image, 'full-screen'),
-    magnifier: (attr(image, 'magnifier') !== null || attr(image, 'data-magnifier') !== null) && parseInt(attr(image, 'magnifier') || attr(image, 'data-magnifier'), 10),
-    magnifyInFullscreen: isTrue(image, 'magnify-in-fullscreen') || isTrue(image, 'magnifier-in-fullscreen'),
+    magnifier: (attr(image, 'magnifier') !== null || attr(image, 'data-magnifier') !== null) && parseFloat(attr(image, 'magnifier') || attr(image, 'data-magnifier'), 10),
     bottomCircleOffset: parseInt(attr(image, 'bottom-circle-offset') || attr(image, 'data-bottom-circle-offset') || 5, 10),
-    ratio: parseFloat(attr(image, 'ratio') || attr(image, 'data-ratio') || 0) || false,
-    responsive: isTrue(image, 'responsive'),
-    ciToken: attr(image, 'responsive') || attr(image, 'data-responsive') || 'demo',
+    ciToken: attr(image, 'responsive') || attr(image, 'data-responsive'),
     ciFilters: attr(image, 'filters') || attr(image, 'data-filters'),
@@ -55,13 +50,18 @@ ciTransformation: attr(image, 'transformation') || attr(image, 'data-transformation'),
     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.ultrafast.io/https://scaleflex.airstore.io/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')
   };
 };
 
+exports.get360ViewProps = get360ViewProps;
+
 var isTrue = function isTrue(image, type) {
   var imgProp = attr(image, type);
-  var imgDataProp = attr(image, 'data-' + type);
-
+  var imgDataProp = attr(image, "data-".concat(type));
   return imgProp !== null && imgProp !== 'false' || imgDataProp !== null && imgDataProp !== 'false';
 };
 
+exports.isTrue = isTrue;
+
 var attr = function attr(element, attribute) {
@@ -71,177 +71,14 @@ return element.getAttribute(attribute);
 
+exports.attr = attr;
+
 var setView360Icon = function setView360Icon(view360Icon, logoSrc) {
-  view360Icon.style.background = 'rgba(255,255,255,0.8) url(\'' + logoSrc + '\') 50% 50% / contain no-repeat';
+  view360Icon.style.background = "rgba(255,255,255,0.8) url('".concat(logoSrc, "') 50% 50% / contain no-repeat");
 };
 
-var magnify = function magnify(container) {
-  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var src = arguments[2];
-  var glass = arguments[3];
-  var zoom = arguments[4];
+exports.setView360Icon = setView360Icon;
 
-  var w = void 0,
-      h = void 0,
-      bw = void 0;
-  var _offset$x = offset.x,
-      offsetX = _offset$x === undefined ? 0 : _offset$x,
-      _offset$y = offset.y,
-      offsetY = _offset$y === undefined ? 0 : _offset$y;
-
-  var backgroundSizeX = (container.offsetWidth - offsetX * 2) * zoom;
-  var backgroundSizeY = (container.offsetHeight - offsetY * 2) * zoom;
-
-  glass.setAttribute("class", "cloudimage-360-img-magnifier-glass");
-  container.prepend(glass);
-
-  glass.style.backgroundImage = "url('" + src + "')";
-  glass.style.backgroundSize = backgroundSizeX + 'px ' + backgroundSizeY + 'px';
-
-  bw = 3;
-  w = glass.offsetWidth / 2;
-  h = glass.offsetHeight / 2;
-
-  glass.addEventListener("mousemove", moveMagnifier);
-  container.addEventListener("mousemove", moveMagnifier);
-
-  glass.addEventListener("touchmove", moveMagnifier, { passive: true });
-  container.addEventListener("touchmove", moveMagnifier, { passive: true });
-
-  function moveMagnifier(e) {
-    var pos = void 0,
-        x = void 0,
-        y = void 0;
-
-    pos = getCursorPos(e);
-    x = pos.x;
-    y = pos.y;
-
-    if (x > container.offsetWidth - w / zoom) {
-      x = container.offsetWidth - w / zoom;
-    }
-
-    if (x < w / zoom) {
-      x = w / zoom;
-    }
-
-    if (y > container.offsetHeight - h / zoom) {
-      y = container.offsetHeight - h / zoom;
-    }
-
-    if (y < h / zoom) {
-      y = h / zoom;
-    }
-
-    glass.style.left = x - w + "px";
-    glass.style.top = y - h + "px";
-
-    var backgroundPosX = (x - offsetX) * zoom - w + bw;
-
-    var backgroundPosY = (y - offsetY) * zoom - h + bw;
-
-    glass.style.backgroundPosition = '-' + backgroundPosX + 'px -' + backgroundPosY + 'px';
-  }
-
-  function getCursorPos(e) {
-    var a = void 0,
-        x = 0,
-        y = 0;
-    e = e || window.event;
-    a = container.getBoundingClientRect();
-    x = e.pageX - a.left;
-    y = e.pageY - a.top;
-    x = x - window.pageXOffset;
-    y = y - window.pageYOffset;
-
-    return { x: x, y: y };
-  }
-};
-
-var getSizeLimit = function getSizeLimit(currentSize) {
-  if (currentSize <= 25) return '25';
-  if (currentSize <= 50) return '50';
-
-  return (Math.ceil(currentSize / 100) * 100).toString();
-};
-
-var getSizeAccordingToPixelRatio = function getSizeAccordingToPixelRatio(size) {
-  var splittedSizes = size.toString().split('x');
-  var result = [];
-
-  [].forEach.call(splittedSizes, function (size) {
-    result.push(size * Math.round(window.devicePixelRatio || 1));
-  });
-
-  return result.join('x');
-};
-
-var getResponsiveWidthOfContainer = function getResponsiveWidthOfContainer(width) {
-  return getSizeLimit(width);
-};
-
-var fit = function fit(contains) {
-  return function (parentWidth, parentHeight, childWidth, childHeight) {
-    var scale = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 1;
-    var offsetX = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0.5;
-    var offsetY = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0.5;
-
-    var childRatio = childWidth / childHeight;
-    var parentRatio = parentWidth / parentHeight;
-    var width = parentWidth * scale;
-    var height = parentHeight * scale;
-
-    if (contains ? childRatio > parentRatio : childRatio < parentRatio) {
-      height = width / childRatio;
-    } else {
-      width = height * childRatio;
-    }
-
-    return {
-      width: width,
-      height: height,
-      offsetX: (parentWidth - width) * offsetX,
-      offsetY: (parentHeight - height) * offsetY
-    };
-  };
-};
-
-var isTwoFingers = function isTwoFingers(event) {
-  return event.targetTouches.length === 2;
-};
-
-var getMaxZoomIntensity = function getMaxZoomIntensity(width, maxScale) {
-  var maxWidth = maxScale * width;
-  var maxIntensity = maxWidth - width;
-
-  return maxIntensity;
-};
-
-var normalizeZoomFactor = function normalizeZoomFactor(event, pointerZoomFactor) {
-  var scrollEvent = Math.abs(event.deltaY);
-  var zoomFactor = scrollEvent < 125 ? -pointerZoomFactor * 10 : -pointerZoomFactor;
-
-  return zoomFactor;
-};
-
-var contain = fit(true);
-
-var addClass = function addClass(el, className) {
-  if (el.classList) el.classList.add(className);else el.className += ' ' + className;
-};
-
-var removeClass = function removeClass(el, className) {
-  if (el.classList) el.classList.remove(className);else el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
-};
-
-var pad = function pad(n) {
-  var width = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-
-  n = n + '';
-
-  return n.length >= width ? n : new Array(width - n.length + 1).join('0') + n;
-};
-
 var debounce = function debounce(func, timeout) {
-  var timer = void 0;
+  var timer;
   return function () {
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -251,5 +88,4 @@ }
     clearTimeout(timer);
-
     timer = setTimeout(function () {
-      func.apply(undefined, args);
+      func.apply(_this, args);
     }, timeout);
@@ -259,14 +95,2 @@ };
 
-exports.get360ViewProps = get360ViewProps;
-exports.setView360Icon = setView360Icon;
-exports.magnify = magnify;
-exports.getResponsiveWidthOfContainer = getResponsiveWidthOfContainer;
-exports.getSizeAccordingToPixelRatio = getSizeAccordingToPixelRatio;
-exports.contain = contain;
-exports.addClass = addClass;
-exports.removeClass = removeClass;
-exports.pad = pad;
-exports.isTwoFingers = isTwoFingers;
-exports.getMaxZoomIntensity = getMaxZoomIntensity;
-exports.normalizeZoomFactor = normalizeZoomFactor;
 exports.debounce = debounce;

dist/index.js

@@ -1,23 +0,38 @@
-'use strict';
+"use strict";
 
-require('core-js/features/array/for-each');
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-require('core-js/features/array/filter');
+require("core-js/features/array/for-each");
 
-require('core-js/features/array/includes');
+require("core-js/features/array/filter");
 
-var _ci = require('./ci360.service');
+require("core-js/features/array/includes");
 
-var _ci2 = _interopRequireDefault(_ci);
+var _ci = _interopRequireDefault(require("./ci360.service"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _ci2 = require("./ci360.utils");
 
+function getContainerWithId(container) {
+  var containerId = container.id;
+
+  if (!containerId) {
+    var uniqueId = Math.floor(Math.random() * 10000);
+    var generatedContainerId = "cloudimage-360-view-".concat(uniqueId);
+    container.id = generatedContainerId;
+  }
+
+  return container;
+}
+
 function init() {
   var viewers = [];
   var view360Array = document.querySelectorAll('.cloudimage-360:not(.initialized)');
+  [].slice.call(view360Array).forEach(function (_container) {
+    var container = getContainerWithId(_container);
+    var isHotspotsEnabled = (0, _ci2.isTrue)(container, 'hotspots');
 
-  [].slice.call(view360Array).forEach(function (container) {
-    viewers.push(new _ci2.default(container));
+    if (!isHotspotsEnabled) {
+      viewers.push(new _ci.default(container));
+    }
   });
-
   window.CI360._viewers = viewers;
@@ -36,3 +51,3 @@ }
 
-function getActiveIndexByID(id) {
+function getActiveIndexByID(id, oriantation) {
   if (isNoViewers()) return;
@@ -44,5 +59,37 @@
 
-  return currentViewer && currentViewer.activeImage - 1;
+  if (oriantation === 'y') {
+    return currentViewer && currentViewer.activeImageY - 1;
+  }
+
+  return currentViewer && currentViewer.activeImageX - 1;
 }
 
+function add(id) {
+  var view360Array = Array.from(document.querySelectorAll('.cloudimage-360:not(.initialized)'));
+
+  if (view360Array.length && id) {
+    var newViewContainer = view360Array.filter(function (viewer) {
+      return viewer.id === id;
+    })[0];
+    newViewContainer && window.CI360._viewers.push(new _ci.default(newViewContainer));
+  }
+}
+
+function update() {
+  var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+  var forceUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
+  if (id) {
+    var view = window.CI360._viewers.filter(function (viewer) {
+      return viewer.id === id;
+    })[0];
+
+    view.updateView(forceUpdate, window.CI360._viewers);
+  } else {
+    window.CI360._viewers.forEach(function (viewer) {
+      viewer.updateView(forceUpdate, window.CI360._viewers);
+    });
+  }
+}
+
 function isNoViewers() {
@@ -52,2 +99,13 @@ return !(window.CI360._viewers && window.CI360._viewers.length > 0);
 
+function addHotspots(instanceId, config) {
+  var view360Array = document.querySelectorAll('.cloudimage-360:not(.initialized)');
+  var container = Array.from(view360Array).find(function (view) {
+    return view.id === instanceId;
+  });
+
+  if (container) {
+    window.CI360._viewers.push(new _ci.default(container, false, config));
+  }
+}
+
 window.CI360 = window.CI360 || {};
@@ -57,2 +115,5 @@ window.CI360.init = init;
 window.CI360.getActiveIndexByID = getActiveIndexByID;
+window.CI360.update = update;
+window.CI360.add = add;
+window.CI360.addHotspots = addHotspots;
 
@@ -59,0 +120,0 @@ if (!window.CI360.notInitOnLoad) {

package.json

 {
   "name": "js-cloudimage-360-view",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0",
   "main": "dist/index.js",
@@ -28,5 +28,5 @@ "description": "",
     "build": "npm run clean-build && webpack --mode production --config config/webpack-build.config.js",
-    "clean-dist": "del dist",
+    "clean-dist": "rm -rf dist",
     "dist": "npm run clean-dist && babel src -d dist --copy-files",
-    "clean-demo": "del examples/dist",
+    "clean-demo": "rm -rf examples/dist",
     "build-demo": "npm run clean-demo && webpack --mode production  --config config/webpack-demo.config.js",
@@ -37,8 +37,12 @@ "deploy-demo": "gh-pages -d examples/dist",
   "dependencies": {
+    "@babel/runtime": "^7.17.0",
+    "@popperjs/core": "^2.11.2",
     "core-js": "^3.0.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.4",
+    "@babel/cli": "^7.16.7",
+    "@babel/core": "^7.16.7",
+    "@babel/plugin-transform-runtime": "^7.16.5",
+    "@babel/preset-env": "^7.16.5",
+    "babel-loader": "^8.2.3",
     "babel-plugin-array-includes": "^2.0.3",
@@ -48,3 +52,3 @@ "babel-preset-env": "^1.7.0",
     "babel-preset-minify": "^0.5.0",
-    "babel-preset-stage-2": "^6.24.1",
+    "babel-preset-stage-0": "^6.24.1",
     "css-loader": "^2.1.1",
@@ -54,5 +58,6 @@ "gh-pages": "^2.0.1",
     "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.9.0",
     "mobile-detect": "^1.4.3",
     "style-loader": "^0.23.1",
-    "webpack": "^4.29.6",
+    "webpack": "^4.46.0",
     "webpack-cli": "^3.3.0",
@@ -59,0 +64,0 @@ "webpack-dev-server": "^3.2.1"

README.md

@@ -1,5 +0,6 @@
-[![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)
 
@@ -9,6 +10,5 @@ [![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>
@@ -35,11 +35,10 @@
 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))
 
@@ -52,5 +51,6 @@ ## <a name="table_of_contents"></a>Table of contents
 * [Methods](#methods)
-* [Customize Icons](#customize-icons)
+* [Customize elements](#customize-elements)
 * [Configuration](#configuration)
 * [Controls](#controls)
+* [Hotspots](#hotspots)
 * [Cloudimage responsive integration](#cloudimage-responsive-integration)
@@ -75,3 +75,3 @@ * [Lazy loading integration](#lazy-loading)
 ```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>
 ```
@@ -87,5 +87,6 @@
    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>
@@ -111,6 +112,50 @@ ```
 > <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
@@ -135,22 +180,48 @@
 ```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
 
-You can customize the icons by adding the following classes:
+#### `oriantation`: string
+The oriantation of the active index
 
+## <a name="customize-elements"></a> Customize elements
+
+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%;
+}
 ```
@@ -171,8 +242,21 @@
 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).
 
@@ -182,10 +266,8 @@ ### 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 .
 
@@ -204,2 +286,8 @@ ### <a name="data-amount-y"></a> data-amount-y (or amount-y)
 
+### data-keys-reverse (or keys-reverse)
+
+###### Type: **Bool** | Default: **false** | _optional_
+
+invert arrow keys on keyboard.
+
 ### data-autoplay (or autoplay)
@@ -211,2 +299,8 @@
 
+### data-play-once (or autoplay)
+
+###### Type: **Bool** | Default: **false** | _optional_
+
+stops the autoplay after one complete cycle.
+
 ### data-autoplay-behavior (or autoplay-behavior)
@@ -220,4 +314,3 @@
 
-### data-full-screen (or full-screen)
-
+### data-fullscreen (or fullscreen)
 ###### Type: **Bool** | Default: **false** | _optional_
@@ -233,14 +326,43 @@
 
-### data-magnifier-in-fullscreen (or magnifier-in-fullscreen)
+### data-ratio (or ratio)
+###### Type: **Number** (width / height) or JSON object | Default: **none** | _optional_
+#### `ratio`: string
 
-###### Type: **bool** | Default: **false** | _optional_
+Setting the height relative to the container width according to the provided ratio</br>
 
-enable magnifier in fullscreen modal.
+```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.
 
-### data-ratio (or ratio)
+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.
 
-###### Type: **Number** (height / width) | Default: **none** | _optional_
+```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>
 
-Prevents page from jumping.
-
 ### data-autoplay-reverse (or autoplay-reverse)
@@ -252,2 +374,8 @@
 
+### data-disable-drag (or disable-drag)
+
+###### Type: **bool** | Default: **false** | _optional_
+
+disable mouse drag.
+
 ### data-speed (or speed)
@@ -269,3 +397,3 @@
 
-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).
 
@@ -290,8 +418,2 @@ ### data-box-shadow (or box-shadow)
 
-### 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)
@@ -301,3 +423,3 @@
 
-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).
 
@@ -322,7 +444,6 @@ ### data-stop-at-edges (or stop-at-edges)
 
-### 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`.
 
@@ -333,3 +454,3 @@ example:
 data-folder="https://scaleflex.airstore.io/demo/360-car/"
-data-image-list='[
+data-image-list-x='[
    "iris-1.jpeg",
@@ -342,52 +463,36 @@ "iris-4.jpeg",
 
-### data-lazyload (or lazyload)
+### data-image-list-y (or data-image-list-y)
 
-###### Type: **Bool** | Default: **false** | _optional_
+###### Type: **Array** | _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)
+Option to add list of images in y-oriantation instead of `folder` , `filename-y` & `amount-y`.
 
-###### Type: **bool** | Default: **false** | _optional_
+example:
 
-Disable pointer zoom on desktop
+```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)
 
-### data-disable-pinch-zoom (or disable-pinch-zoom)
+###### Type: **Number** | Default: **none** | _optional_
 
-###### Type: **bool** | Default: **false** | _optional_
+Option to scale images on click on it to provided value.
 
-Disable pinch zoom on mobile
-### data-to-start-pointer-zoom (or to-start-pointer-zoom)
+example:
 
-###### Type: **string** | Default: **scroll** | _optional_
+```javascript
+data-pointer-zoom="3"
+```
 
-Events to start pointer zoom
+### data-lazyload (or lazyload)
 
-Available events (scroll, click)
+###### Type: **Bool** | Default: **false** | _optional_
 
-### data-on-mouse-leave (or on-mouse-leave)
-
-###### Type: **string** | Default: **none** | _optional_
-
-Functions called after mouse leave the container
-
-Available functions (resetZoom)
-
-Multiple functions can be applied, separated by "," (comma)
-
-### data-pointer-zoom-factor (or pointer-zoom-factor)
-
-###### Type: **Number** | Default: **2** | _optional_
-
-Pointer zoom scaling factor
-### data-pinch-zoom-factor (or pinch-zoom-factor)
-
-###### Type: **Number** | Default: **2** | _optional_
-
-Pinch zoom scaling factor
-
-### data-max-scale (or max-scale)
-
-###### Type: **Number** | Default: **none** | _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)
@@ -402,7 +507,7 @@
 
-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;
@@ -413,6 +518,6 @@ background: rgba(255, 255, 255, 0.5);
 }
-.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;
@@ -424,3 +529,3 @@ position: absolute;
 }
-.cloudimage-360 .cloudimage-360-next {
+.cloudimage-360 .cloudimage-360-right {
 	display: none;
@@ -432,3 +537,3 @@ position: absolute;
 }
-.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: '';
@@ -440,9 +545,9 @@ display: block;
 }
-.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;
@@ -457,6 +562,6 @@ cursor: default;
 	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>
@@ -468,3 +573,154 @@ <button class="cloudimage-360-bottom"></button>
 <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
@@ -527,23 +783,2 @@
 
-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
@@ -574,3 +809,2 @@
 ## <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)

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license

Found 1 instance in 1 package

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

179428

increased by85.55%

Number of package files

94

increased by944.44%

Lines of code

3845

increased by109.88%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

781

increased by42.52%

Worsened metrics

Dependency count

3

increased by200%

Dev dependency count

20

increased by17.65%

Number of low license alerts

1

increased byInfinity%

License quality

80

decreased by-20%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@babel/runtime@^7.17.0

• + Added@popperjs/core@^2.11.2

• + Added@babel/runtime@7.24.5(transitive)

• + Added@popperjs/core@2.11.8(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)