Merge pull request #23 from pexea12/fix-watched-images

Fix watched images

Author: pexea12

dist/vue-image-lightbox.min.js

@@ -1,7 +1,7 @@
 {
   "name": "vue-image-lightbox",
   "description": "A Vue.js package to display an image gallery lightbox",
-  "version": "5.5.1",
+  "version": "5.5.2",
   "author": "Nguyen Thien Dzung <[email protected]>",
   "license": "MIT",
   "main": "dist/vue-image-lightbox.min.js",

dist/vue-image-lightbox.min.js.map

@@ -53,7 +53,6 @@ export default {
       select: this.startAt,
       thumbSelect: this.startAt,
       lightBoxOn: this.showLightBox,
-      countImages: this.images.length,
       displayThumbs: this.images.slice(0, this.nThumbs),
       timer: null,
 
@@ -62,6 +61,10 @@ export default {
   },
 
   computed: {
+    countImages() { 
+      return this.images.length
+    },
+
     imagesThumb() {
       if (this.siteLoading) {
         return this.displayThumbs.map(({ thumb }) => ({
@@ -75,16 +78,16 @@ export default {
     },
   },
 
-  mounted() {
-    if (this.autoPlay) {
-      this.timer = setInterval(() => {
-        this.nextImage()
-      }, this.autoPlayTime)
-    }
-  },
+  watch: {
+    startAt() {
+      this.$set(this, 'select', this.startAt)
+      this.$set(this, 'thumbSelect', this.startAt)
+    },
 
+    images() {
+      this.$set(this, 'displayThumbs', this.images.slice(0, this.nThumbs))
+    },
 
-  watch: {
     select() {
       let halfDown = Math.floor(this.nThumbs / 2)
       let mod = 1 - (this.nThumbs % 2)
@@ -119,6 +122,14 @@ export default {
     },
   },
 
+  mounted() {
+    if (this.autoPlay) {
+      this.timer = setInterval(() => {
+        this.nextImage()
+      }, this.autoPlayTime)
+    }
+  },
+
   methods: {
     showImage(index) {
       document.addEventListener('keydown', this.addKeyEvent)