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

package/dist/ci360.service.js

@@ -1,155 +1,312 @@
-'use strict';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 
-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 _ci = require("./ci360.utils");
 
-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 _constants = require("./constants/");
 
-var _ci = require('./ci360.utils');
+require("./static/css/style.css");
 
-var _ci2 = require('./ci360.constants');
+require("./static/css/hotspots.css");
 
-require('./static/css/style.css');
+var _utils = require("./utils");
 
-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); } }
+var _togglePopupEvents = require("./utils/hotspots/toggle-popup-events");
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+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; }
 
-var CI360Viewer = function () {
-  function CI360Viewer(container, fullscreen, ratio) {
-    _classCallCheck(this, CI360Viewer);
+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;
     this.loadedImagesX = 0;
     this.loadedImagesY = 0;
     this.imagesLoaded = false;
     this.reversed = false;
     this.fullscreenView = !!fullscreen;
-    this.ratio = ratio;
     this.imagesX = [];
     this.imagesY = [];
-    this.resizedImagesX = [];
-    this.resizedImagesY = [];
     this.originalImagesX = [];
     this.originalImagesY = [];
+    this.resizedImagesX = [];
+    this.resizedImagesY = [];
     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();
 
       if (this.autoplay || this.loopTimeoutId) {
         this.stop();
         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() {
-      if (!this.imagesLoaded || !this.isClicked) return;
+      var _this = this;
 
-      this.movementStart = { x: 0, y: 0 };
+      if (!this.imagesLoaded || !this.isClicked) return;
+      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: "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',
+    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;
-
-      var differenceInPositionX = Math.abs(prevPosition.x - nextPositions.x);
-      var differenceInPositionY = Math.abs(prevPosition.y - nextPositions.y);
-      var sensitivity = 10;
+    key: "mouseLeave",
+    value: function mouseLeave() {
+      if (!this.imagesLoaded) return;
 
-      if (differenceInPositionX > sensitivity) this.movingDirection = _ci2.ORIENTATIONS.X;
+      if (this.pointerZoom && this.mouseTracked) {
+        this.togglePointerZoom();
+      }
 
-      if (differenceInPositionY > sensitivity && this.allowSpinY) this.movingDirection = _ci2.ORIENTATIONS.Y;
+      if (this.isMagnifyOpen) {
+        this.closeMagnifier();
+      }
     }
   }, {
-    key: 'mouseScroll',
-    value: function mouseScroll(event) {
-      if (this.disablePointerZoom || this.isMagnifyOpen) return;
+    key: "togglePointerZoom",
+    value: function togglePointerZoom() {
+      var _this2 = this;
+
+      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;
 
-      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;
+            _this2.update();
+          }, step * 200);
+        });
 
-      if (isClickedToZoom || isScrolledToZoom) {
-        this.initMouseScrollZoom(event);
+        this.mouseTracked = true;
+        this.container.style.cursor = 'zoom-out';
       }
     }
   }, {
-    key: 'touchStart',
-    value: function touchStart(event) {
-      if (!this.imagesLoaded) 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 isPinchZoom = !this.disablePinchZoom && (0, _ci.isTwoFingers)(event) && !this.isMagnifyOpen;
+      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 (isPinchZoom) {
-        this.initAndSetPinchZoom(event);
-      };
+      if (isAllImagesLoaded) {
+        this.removeLoader();
+        this.togglePointerZoom(event);
+        this.mouseTracked = true;
+        this.isAllOriginalImagesLoaded = true;
+      }
+    }
+  }, {
+    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 isMouseOnHotspotElement = (0, _utils.isMouseOnHotspot)();
       this.hideInitialIcons();
 
       if (this.autoplay || this.loopTimeoutId) {
@@ -157,48 +314,66 @@ var CI360Viewer = function () {
         this.autoplay = false;
       }
 
-      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 };
-
-        this.updateMovingDirection(this.intialPositions, nextPositions);
-        this.onMoveHandler(event);
+      if (event.cancelable) {
+        event.preventDefault();
       }
+
+      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;
 
       if (this.glass) {
         this.closeMagnifier();
       }
+
+      if (event.keyCode === 27) {
+        //ESC
+        if (this.mouseTracked) {
+          this.togglePointerZoom();
+        }
+      }
     }
   }, {
-    key: 'hideInitialIcons',
+    key: "hideInitialIcons",
     value: function hideInitialIcons() {
       if (this.glass) {
         this.closeMagnifier();
@@ -209,17 +384,7 @@ var CI360Viewer = function () {
       }
     }
   }, {
-    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) {
       this.mousePositions = {
         x: event.clientX,
@@ -227,153 +392,54 @@ var CI360Viewer = function () {
       };
     }
   }, {
-    key: 'getCursorPositionInCanvas',
+    key: "getCursorPositionInCanvas",
     value: function getCursorPositionInCanvas() {
       var canvasRect = this.canvas.getBoundingClientRect();
-
       this.pointerCurrentPosition = {
         x: this.mousePositions.x - canvasRect.left,
         y: this.mousePositions.y - canvasRect.top
       };
-
       return this.pointerCurrentPosition;
     }
   }, {
-    key: 'mouseScrollZoom',
-    value: function mouseScrollZoom(event) {
-      event.preventDefault();
-
-      if (this.autoplay || this.loopTimeoutId) {
-        this.stop();
-        this.autoplay = false;
-      }
-
-      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();
+    key: "keyDown",
+    value: function keyDown(event) {
+      if (!this.imagesLoaded) return;
 
-        this.startPointerZoom = false;
-        this.mouseTracked = false;
+      if (this.glass) {
+        this.closeMagnifier();
       }
 
-      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 === 37) {
+        // left
+        this.keysReverse ? this.left() : this.right();
+        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.resetZoomIcon) this.hideResetZoomIcon();
-
-      if (this.zoomIntensity) {
-        this.zoomIntensity = 0;
-        this.update();
+      if (event.keyCode === 39) {
+        // right
+        this.keysReverse ? this.right() : this.left();
+        this.onSpin();
       }
-    }
-  }, {
-    key: 'keyDown',
-    value: function keyDown(event) {
-      if (!this.imagesLoaded) return;
 
-      if (this.glass) {
-        this.closeMagnifier();
-      }
+      if (this.allowSpinY) {
+        event.preventDefault();
 
-      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 === 38) {
+          // up
+          this.keysReverse ? this.top() : this.bottom();
+          this.onSpin();
         }
 
-        this.onSpin();
+        if (event.keyCode === 40) {
+          // down
+          this.keysReverse ? this.bottom() : this.top();
+          this.onSpin();
+        }
       }
     }
   }, {
-    key: 'onSpin',
+    key: "onSpin",
     value: function onSpin() {
       if (this.bottomCircle) {
         this.hide360ViewCircleIcon();
@@ -389,7 +455,7 @@ var CI360Viewer = function () {
       }
     }
   }, {
-    key: 'keyUp',
+    key: "keyUp",
     value: function keyUp(event) {
       if (!this.imagesLoaded) return;
 
@@ -398,87 +464,12 @@ var CI360Viewer = function () {
       }
     }
   }, {
-    key: 'onFinishSpin',
+    key: "onFinishSpin",
     value: function onFinishSpin() {
       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) {
       var isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse;
 
@@ -488,24 +479,21 @@ var CI360Viewer = function () {
         if (isReachedTheEdge) {
           this.activeImageX = this.amountX;
 
-          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;
       }
     }
   }, {
-    key: 'moveActiveIndexDown',
+    key: "moveActiveIndexDown",
     value: function moveActiveIndexDown(itemsSkipped) {
       var isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse;
 
@@ -516,14 +504,12 @@ var CI360Viewer = function () {
           this.activeImageX = 1;
 
           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');
         }
       } else {
         if (this.activeImageX - itemsSkipped < 1) {
@@ -535,7 +521,7 @@ var CI360Viewer = function () {
       }
     }
   }, {
-    key: 'moveActiveYIndexUp',
+    key: "moveActiveYIndexUp",
     value: function moveActiveYIndexUp(itemsSkipped) {
       var isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse;
 
@@ -546,23 +532,20 @@ var CI360Viewer = function () {
           this.activeImageY = this.amountY;
 
           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;
       }
     }
   }, {
-    key: 'moveActiveYIndexDown',
+    key: "moveActiveYIndexDown",
     value: function moveActiveYIndexDown(itemsSkipped) {
       var isReverse = this.controlReverse ? !this.spinReverse : this.spinReverse;
 
@@ -573,13 +556,12 @@ var CI360Viewer = function () {
           this.activeImageY = 1;
 
           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');
         }
       } else {
         if (this.activeImageY - itemsSkipped < 1) {
@@ -591,219 +573,242 @@ var CI360Viewer = function () {
       }
     }
   }, {
-    key: 'loop',
-    value: function loop(reversed) {
-      switch (this.autoplayBehavior) {
-        case _ci2.AUTOPLAY_BEHAVIOR.SPIN_Y:
-          reversed ? this.bottom() : this.top();
-          break;
-
-        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;
+    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_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);
       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);
       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: 'replaceImages',
-    value: function replaceImages(orientation) {
-      if (orientation === _ci2.ORIENTATIONS.Y) {
-        this.imagesY = this.resizedImagesY;
-      } else {
-        this.imagesX = this.resizedImagesX;
-      }
+    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: '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);
-
-      this.requestNewImages(srcX, this.amountX, _ci2.ORIENTATIONS.X);
+      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));
 
       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),
-            offsetX = _contain.offsetX,
-            offsetY = _contain.offsetY,
+        var _contain = (0, _utils.contain)(this.canvas.width, this.canvas.height, image.width, image.height),
             width = _contain.width,
-            height = _contain.height;
+            height = _contain.height,
+            offsetX = _contain.offsetX,
+            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) {
       if (this.loader) {
         this.loader.style.width = percentage + '%';
@@ -814,127 +819,40 @@ var CI360Viewer = function () {
       }
     }
   }, {
-    key: 'onAllImagesLoaded',
-    value: function onAllImagesLoaded() {
-      this.imagesLoaded = true;
-
-      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();
-      }
+    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);
 
       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,
             offsetY = _contain2.offsetY,
             width = _contain2.width,
             height = _contain2.height;
 
-        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();
       }
 
       if (this.boxShadow && !this.fullscreenView) {
-        this.addBoxShadow();
+        this.boxShadowEl = (0, _utils.createBoxShadow)(this.boxShadow, this.innerBox);
       }
 
       if (this.bottomCircle && !this.fullscreenView) {
@@ -945,458 +863,166 @@ var CI360Viewer = function () {
         this.addFullscreenIcon();
       }
 
-      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;
 
-      var percentage = Math.round(totalLoadedImages / totalAmount * 100);
-
-      this.updatePercentageInLoader(percentage);
+      this.speedFactor = (0, _utils.getSpeedFactor)(this.dragSpeed, this.amountX, this.container.offsetWidth);
 
-      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);
-
-      this.iconsContainer.appendChild(closeFullscreenIcon);
-    }
-  }, {
-    key: 'add360ViewIcon',
-    value: function add360ViewIcon() {
-      var view360Icon = document.createElement('div');
-
-      view360Icon.className = 'cloudimage-360-view-360-icon';
-      view360Icon.innerText = '0%';
-
-      this.view360Icon = view360Icon;
-      this.innerBox.appendChild(view360Icon);
-    }
-  }, {
-    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() {
-      var _this3 = this;
-
-      var image = new Image();
-      var src = this.getOriginalSrc();
-      this.isMagnifyOpen = true;
-
-      image.src = src;
-      image.onload = function () {
-        if (_this3.glass) {
-          _this3.glass.style.cursor = 'none';
-        }
-      };
-
-      this.glass = document.createElement('div');
-      this.container.style.overflow = 'hidden';
-
-      (0, _ci.magnify)(this.container, this.offset, src, this.glass, this.magnifier || 3);
-    }
-  }, {
-    key: 'closeMagnifier',
-    value: function closeMagnifier() {
-      if (!this.glass) return;
-
-      this.container.style.overflow = 'visible';
-      this.container.removeChild(this.glass);
-      this.glass = null;
-      this.isMagnifyOpen = false;
-    }
-  }, {
-    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: '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 (this.container.parentNode.parentNode === document.body) {
-        this.closeFullscreenModal();
-      };
-    }
-  }, {
-    key: 'closeFullscreenModal',
-    value: function closeFullscreenModal() {
-      document.body.removeChild(this.container.parentNode);
-      window.document.body.style.overflow = 'visible';
-    }
-  }, {
-    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');
+      if (this.view360Icon) {
+        this.view360Icon.innerText = ''; //TODO [deprecated]: remove setView360Icon in the upcoming versions
 
-      resetZoomIcon.className = 'cloudimage-360-reset-zoom-icon';
-      this.resetZoomIcon = resetZoomIcon;
+        if (this.logoSrc) (0, _ci.setView360Icon)(this.view360Icon, this.logoSrc);
+      }
 
-      resetZoomIcon.onmouseenter = this.resetZoom.bind(this);
+      this.initControls();
 
-      this.iconsContainer.appendChild(resetZoomIcon);
+      if (this.hotspotsConfigs && !this.autoplay) {
+        (0, _utils.updateHotspots)(this.container, this.hotspotsConfigs, this.activeImageX, this.activeImageY, this.movingDirection);
+      }
     }
   }, {
-    key: 'hideResetZoomIcon',
-    value: function hideResetZoomIcon() {
-      if (!this.resetZoomIcon) return;
-      if (this.magnifierIcon) this.enableMagnifierIcon();
-      if (this.fullscreenIcon) this.showFullscreenIcon();
+    key: "magnify",
+    value: function magnify(event) {
+      var _this3 = this;
 
-      this.resetZoomIcon.style.display = 'none';
-    }
-  }, {
-    key: 'showResetZoomIcon',
-    value: function showResetZoomIcon() {
-      if (!this.resetZoomIcon) return;
-      if (this.magnifierIcon) this.disableMagnifierIcon();
-      if (this.fullscreenIcon) this.hideFullscreenIcon();
+      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;
 
-      this.resetZoomIcon.style.display = 'block';
-    }
-  }, {
-    key: 'addLoader',
-    value: function addLoader() {
-      var loader = document.createElement('div');
-      loader.className = 'cloudimage-360-loader';
+      currentOriginalImage.onload = function () {
+        if (_this3.glass) {
+          _this3.glass.style.cursor = 'none';
+        }
+      };
 
-      this.loader = loader;
-      this.innerBox.appendChild(loader);
+      this.glass = document.createElement('div');
+      this.container.style.overflow = 'hidden';
+      (0, _utils.magnify)(this.container, this.offset, currentOriginalImage, this.glass, this.magnifier || 3);
     }
   }, {
-    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: "closeMagnifier",
+    value: function closeMagnifier() {
+      if (!this.glass) return;
+      this.container.style.overflow = 'visible';
+      this.container.removeChild(this.glass);
+      this.glass = null;
+      this.isMagnifyOpen = false;
     }
   }, {
-    key: 'removeLoader',
-    value: function removeLoader() {
-      if (!this.loader) return;
-
-      this.innerBox.removeChild(this.loader);
-      this.loader = null;
+    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: 'remove360ViewIcon',
-    value: function remove360ViewIcon() {
-      if (!this.view360Icon) return;
+    key: "setFullscreenEvents",
+    value: function setFullscreenEvents(_, event) {
+      if (event.type === 'click') return this.closeFullscreenModal(event);
 
-      this.innerBox.removeChild(this.view360Icon);
-      this.view360Icon = null;
+      if (event.key === 'Escape' && this.container.parentNode.parentNode === document.body) {
+        this.closeFullscreenModalOnEsc(event);
+      }
     }
   }, {
-    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: "closeFullscreenModalOnEsc",
+    value: function closeFullscreenModalOnEsc(event) {
+      this.closeFullscreenModal(event);
     }
   }, {
-    key: 'play',
+    key: "play",
     value: function play() {
       var _this4 = this;
 
       if (this.bottomCircle) this.hide360ViewCircleIcon();
       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);
+          }
         }
       }, 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];
-
-      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, '?');
+      var container = this.container;
+      var imageProps = (0, _ci.get360ViewProps)(container);
+      var srcPropsChanged = (0, _utils.isPropsChangeRequireReload)(this, imageProps);
+      var reInitView = srcPropsChanged || forceUpdate;
 
-          _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;
         });
-      }
-    }
-  }, {
-    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;
+        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));
       }
 
-      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', '');
       newElement.style.position = 'relative';
       newElement.style.width = '100%';
@@ -1407,244 +1033,243 @@ var CI360Viewer = function () {
       oldElement.parentNode.replaceChild(newElement, oldElement);
     }
   }, {
-    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);
       };
 
       var onTopStart = function onTopStart(event) {
         event.stopPropagation();
+
         _this6.onSpin();
+
         _this6.top();
+
         _this6.loopTimeoutId = window.setInterval(_this6.top.bind(_this6), _this6.autoplaySpeed);
       };
 
       var onBottomStart = function onBottomStart(event) {
         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');
-        }
-      }
-    }
-  }, {
-    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);
+      var controlsElements = (0, _utils.initControls)(controlsConfig, controlsTriggers);
+      this.topElem = controlsElements.top;
+      this.bottomElem = controlsElements.bottom;
+      this.leftElem = controlsElements.left;
+      this.rightElem = controlsElements.right;
     }
   }, {
-    key: 'attachEvents',
+    key: "attachEvents",
     value: function attachEvents(draggable, swipeable, keys) {
-      var _this7 = this;
-
-      window.addEventListener('resize', (0, _ci.debounce)(function () {
-        _this7.requestResizedImages();
-      }, 300));
+      window.addEventListener('resize', this.requestResizedImages.bind(this));
 
       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));
       }
 
       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 });
-      }
-
-      if (!this.disablePointerZoom && !this.fullscreenView) {
-        this.container.addEventListener('wheel', this.mouseScroll.bind(this));
+        this.container.addEventListener('touchmove', this.touchMove.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));
       }
-    }
-  }, {
-    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;
-
-      var mouseLeaveActions = actions.split(',');
 
-      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;
-      }
+      document.addEventListener('keydown', this.keyDownGeneral.bind(this));
     }
   }, {
-    key: 'init',
+    key: "init",
     value: function init(container) {
+      var _this7 = this;
+
+      var update = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+
       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,
           bottomCircleOffset = _get360ViewProps.bottomCircleOffset,
           boxShadow = _get360ViewProps.boxShadow,
           autoplay = _get360ViewProps.autoplay,
           autoplayBehavior = _get360ViewProps.autoplayBehavior,
           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,
           ciFilters = _get360ViewProps.ciFilters,
           ciTransformation = _get360ViewProps.ciTransformation,
@@ -1655,76 +1280,176 @@ var CI360Viewer = function () {
           stopAtEdges = _get360ViewProps.stopAtEdges,
           controlReverse = _get360ViewProps.controlReverse,
           hide360Logo = _get360ViewProps.hide360Logo,
-          logoSrc = _get360ViewProps.logoSrc;
-
-      var ciParams = { ciToken: ciToken, ciFilters: ciFilters, ciTransformation: ciTransformation };
-
-      this.addInnerBox();
-      this.addIconsContainer();
-      this.addLoader();
+          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.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;
       this.bottomCircleOffset = bottomCircleOffset;
       this.boxShadow = boxShadow;
       this.autoplay = autoplay;
       this.autoplayBehavior = autoplayBehavior;
       this.playOnce = playOnce;
-      this.toStartPointerZoom = toStartPointerZoom, this.disablePointerZoom = disablePointerZoom;
-      this.disablePinchZoom = disablePinchZoom;
-      this.pointerZoomFactor = pointerZoomFactor;
-      this.pinchZoomFactor = pinchZoomFactor;
-      this.maxScale = maxScale;
       this.speed = speed;
       this.reversed = autoplayReverse;
       this.disableDrag = disableDrag;
       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;
       this.stopAtEdges = stopAtEdges;
       this.hide360Logo = hide360Logo;
       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);
+
+      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);
+
+        if (!this.hide360Logo && !this.lazyload && this.logoSrc) {
+          this.add360ViewIcon();
+          (0, _ci.setView360Icon)(this.view360Icon, this.logoSrc);
+        }
+
+        if (this.magnifier) {
+          this.addMagnifier();
+        }
+
+        if (this.bottomCircle && !this.fullscreenView) {
+          this.add360ViewCircleIcon();
+        }
 
-      this.applyStylesToContainer();
+        if (this.fullscreen && !this.fullscreenView) {
+          this.addFullscreenIcon();
+        }
 
-      this.addCanvas();
+        if (this.boxShadow && !this.fullscreenView) {
+          this.boxShadowEl = (0, _utils.createBoxShadow)(this.boxShadow, this.innerBox);
+        }
 
-      var srcX = this.getSrc(responsive, container, folder, filenameX, ciParams);
-      var srcY = this.getSrc(responsive, container, folder, filenameY, ciParams);
+        return this.onAllImagesLoaded();
+      }
 
-      this.preloadImages(amountX, srcX, _ci2.ORIENTATIONS.X, lazyload, lazySelector, container, responsive, ciParams);
+      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 (amountY) {
-        this.preloadImages(amountY, srcY, _ci2.ORIENTATIONS.Y, lazyload, lazySelector, container, responsive, ciParams);
+      if (this.hotspotsConfigs && !this.fullscreenView) {
+        (0, _utils.createHotspots)(container, this.hotspotsConfigs);
       }
 
-      this.attachEvents(draggable, swipeable, keys);
+      (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 (onMouseLeave) this.setMouseLeaveActions(onMouseLeave);
+        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);
     }
   }]);
-
   return CI360Viewer;
 }();
 
-exports.default = CI360Viewer;
+var _default = CI360Viewer;
+exports.default = _default;