click handler on gallery images

vue-theme/src/components/gallery.vue

@@ -4,8 +4,7 @@
     ul
         li(v-for="(image, i) of images" :class="{ active: i === selected }")
             .image-wrapper.f-col.center
-                h1 {{ i }}
-                //- img(:src="image")
+                img(:src="image")
     .controls.f-row
         button(@click="prev") <
         .f-grow
@@ -16,7 +15,8 @@
 export default {
     props: {
         images: { type: Array },
-        fullscreengallery: { type: Boolean }
+        fullscreengallery: { type: Boolean },
+        startwith: { type: Number }
     },
     data() { 
         return {
@@ -47,6 +47,9 @@ export default {
             }
         }
     },
+    created() {
+        this.selected = this.startwith
+    },
     mounted() {
         window.addEventListener('keydown', this.interpretKeypress)
     },

vue-theme/src/pages/single.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 .page--single.f-row.between(v-if="$route.params.slug")
-    gallery(:fullscreengallery="fullscreengallery" v-on:close="fullscreengallery = false" :images="images")
+    gallery(:fullscreengallery="fullscreengallery" v-on:close="fullscreengallery = false" :images="images" :startwith="lastImageClicked")
     article.f-grow.shadow
         header
             h1 {{ type }}:{{ $route.params.slug }} single
@@ -33,7 +33,8 @@ export default {
     data() {
         return {
             images: [], 
-            fullscreengallery: false
+            fullscreengallery: false,
+            lastImageClicked: 0
         }
     },
     computed: {
@@ -72,18 +73,30 @@ export default {
                 if(!block) return
                 const doc = new DOMParser().parseFromString(block, 'text/html')
                 const gallery = doc.querySelectorAll('.blocks-gallery-item img')
+                // add captions
                 if(gallery) {
                     this.images = [].slice.call(gallery).map(
-                        item => {  return item.src }
+                        item => { return item.src }
                     )
                 }
             })
+        },
+        wrapImagesWithLink() {
+            const gallery = document.querySelectorAll('.blocks-gallery-item figure, figure.wp-block-image')
+            gallery.forEach((item, i) => {
+                item.addEventListener('click', () => {
+                    this.lastImageClicked = i
+                    console.log('yeah!', this.lastImageClicked)
+                    this.fullscreengallery = true
+                })
+            })
         }
     },
     watch: {
         posts(newVal, oldVal) { 
             // Loads images from the DOM
             this.checkForImages(newVal)
+            this.wrapImagesWithLink()
         }
     },
     mounted() {