Add support for countIndexFrom param to avoid count always from index 1

README.md

@@ -256,6 +256,12 @@ Bottom offset for 360 view line.
 
 Left zero padding on filename. For example: index-zero-base="4" => image index will be "0004"
 
+### <a name="data-count-index-from"></a> data-count-index-from (or count-index-from)
+
+###### Type: **Integer** | Default: **1** | _optional_
+
+When loading file names, the `{index}` tag will be replaced from an integer starting from this value. By defaults it start to count from 1 to the value defined by **amount**. Change this to another number to start from.
+
 ### data-image-list (or image-list)
 
 ###### Type: **Array** | _optional_

package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-cloudimage-360-view",
-  "version": "2.6.0",
+  "version": "2.6.2",
   "main": "dist/index.js",
   "description": "",
   "author": "scaleflex",
@@ -23,7 +23,7 @@
   ],
   "scripts": {
     "start-demo": "webpack-dev-server --mode development --config config/webpack-demo.config.js",
-    "clean-build": "rm -rf build",
+    "clean-build": "rm -rf build/",
     "build": "npm run clean-build && webpack --mode production --config config/webpack-build.config.js",
     "clean-dist": "rm -rf dist",
     "dist": "npm run clean-dist && babel src -d dist --copy-files",

src/ci360.service.js

@@ -311,6 +311,7 @@ class CI360Viewer {
     this.imagesLoaded = true;
     this.container.style.cursor = 'grab';
     this.removeLoader();
+    this.container.dispatchEvent(new CustomEvent('loaded', { }))
 
     if (!this.fullScreenView) {
       this.speedFactor = Math.floor(this.dragSpeed / 150 * 36 / this.amount * 25 * this.container.offsetWidth / 1500) || 1;
@@ -624,7 +625,7 @@ class CI360Viewer {
       }
     } else {
       [...new Array(amount)].map((_item, index) => {
-        const nextZeroFilledIndex = pad(index + 1, this.indexZeroBase);
+        const nextZeroFilledIndex = pad(index + this.countIndexFrom, this.indexZeroBase);
         const resultSrc = src.replace('{index}', nextZeroFilledIndex);
         this.addImage(resultSrc, lazyload, lazySelector, index);
       });
@@ -776,7 +777,7 @@ class CI360Viewer {
 
   init(container) {
     let {
-      folder, filename, imageList, indexZeroBase, amount, draggable = true, swipeable = true, keys, bottomCircle, bottomCircleOffset, boxShadow,
+      folder, filename, imageList, countIndexFrom, indexZeroBase, amount, draggable = true, swipeable = true, keys, bottomCircle, bottomCircleOffset, boxShadow,
       autoplay, speed, autoplayReverse, fullScreen, magnifier, ratio, responsive, ciToken, ciSize, ciOperation,
       ciFilters, lazyload, lazySelector, spinReverse, dragSpeed, stopAtEdges, controlReverse, hide360Logo, logoSrc
     } = get360ViewProps(container);
@@ -788,6 +789,7 @@ class CI360Viewer {
     this.folder = folder;
     this.filename = filename;
     this.imageList = imageList;
+    this.countIndexFrom = countIndexFrom;
     this.indexZeroBase = indexZeroBase;
     this.amount = amount;
     this.bottomCircle = bottomCircle;

src/ci360.utils.js

@@ -3,6 +3,7 @@ const get360ViewProps = (image) => ({
   filename: attr(image, 'filename') || attr(image, 'data-filename') || 'image-{index}.jpg',
   imageList: attr(image, 'image-list') || attr(image, 'data-image-list') || null,
   indexZeroBase: parseInt(attr(image, 'index-zero-base') || attr(image, 'data-index-zero-base') || 0, 10),
+  countIndexFrom: parseInt(attr(image, 'count-index-from') || attr(image, 'data-count-index-from') || 1, 10),
   amount: parseInt(attr(image, 'amount') || attr(image, 'data-amount') || 36, 10),
   speed: parseInt(attr(image, 'speed') || attr(image, 'data-speed') || 80, 10),
   dragSpeed: parseInt(attr(image, 'drag-speed') || attr(image, 'data-drag-speed') || 150, 10),