diff --git a/README.md b/README.md index 4bd2211..52aa85d 100644 --- a/README.md +++ b/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 | diff --git a/src/App.vue b/src/App.vue index d09ad74..493b96e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -3,6 +3,7 @@ class="lb-demo" :thumbnail="thumbnail" :images="images" + :openAtIndex="1" >
diff --git a/src/Components/Lightbox.vue b/src/Components/Lightbox.vue index 0f4939f..fc4748c 100644 --- a/src/Components/Lightbox.vue +++ b/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) {