Merge pull request #17 from DCzajkowski/open-at-prop

Open at prop

Author: DCzajkowski

README.md

@@ -117,12 +117,13 @@ import styles from 'vue-pure-lightbox/dist/VuePureLightbox.css'
 
 ### Available props:
 
-| Prop           | Type              | Value                                           |
-| -------------- | ----------------- | ----------------------------------------------- |
-| thumbnail      | string            | Path to a file being your thumbnail             |
-| images         | string[] or array | Array of paths to files visible in the lightbox |
-| alternate-text | string            | **(Optional)** alt="" text for your image       |
-| value          | boolean           | **(Optional)** reactive visibility prop         |
+| Prop           | Type              | Value                                                           |
+| -------------- | ----------------- | --------------------------------------------------------------- |
+| thumbnail      | string            | Path to a file being your thumbnail                             |
+| images         | string[] or array | Array of paths to files visible in the lightbox                 |
+| alternate-text | string            | **(Optional)** alt="" text for your image                       |
+| value          | boolean           | **(Optional)** reactive visibility prop                         |
+| open-at-index  | integer           | **(Optional)** index of an image to show when opening the modal |
 
 ### Available slots:
 | Slot          | Description                                    | Default                              |

src/App.vue

@@ -3,6 +3,7 @@
     class="lb-demo"
     :thumbnail="thumbnail"
     :images="images"
+    :openAtIndex="1"
   >
     <LightboxDefaultLoader slot="loader" />
     <div slot="content" slot-scope="{ url }">

src/Components/Lightbox.vue

@@ -57,6 +57,10 @@
       images: {
         type: Array,
       },
+      openAtIndex: {
+        type: Number,
+        default: 0,
+      },
       alternateText: {
         type: String,
         default: '',
@@ -72,7 +76,7 @@
     data() {
       return {
         visible: this.value,
-        index: 0,
+        index: this.openAtIndex,
         displayImage: true,
       }
     },
@@ -95,11 +99,11 @@
     methods: {
       show() {
         this.visible = true
-        this.index = 0
+        this.index = this.openAtIndex
       },
       hide() {
         this.visible = false
-        this.index = 0
+        this.index = this.openAtIndex
       },
       previous() {
         if (this.hasPrevious) {