current image shows in image viewer

components/GalleryImageViewer.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="image-viewer"
-       :class="{ 'is-visible': isVisible }">
+       :class="{ 'is-visible': isVisible }"
+       :style="imageViewerStyle">
     <div class="close-viewer"
          @click="$emit('close')">
       X
@@ -14,6 +15,13 @@ export default {
     isVisible: {
       type: Boolean,
       required: true
+    },
+    imageUrl: {
+      type: String,
+      required: false,
+      default () {
+        return ''
+      }
     }
   },
 
@@ -22,6 +30,14 @@ export default {
     }
   },
 
+  computed: {
+    imageViewerStyle () {
+      return {
+        backgroundImage: 'url(' + this.imageUrl + ')'
+      }
+    }
+  },
+
   methods: {
   }
 }
@@ -34,6 +50,8 @@ export default {
     magenta,
     cyan
   ); // TEMP
+  background-size: cover;
+  background-position: center center;
 }
 
 @media (max-width: $bp__layout) {
@@ -55,4 +73,10 @@ export default {
     }
   }
 }
+
+@media (min-width: $bp__layout) {
+  .close-viewer {
+    display: none;
+  }
+}
 </style>

components/GalleryPage.vue

@@ -2,6 +2,7 @@
   <div class="gallery-page">
     <GalleryImageViewer class="image-viewer"
                         :is-visible="imageViewerIsVisible"
+                        :image-url="viewingImageUrl"
                         @close="imageViewerIsVisible = false" />
     <div class="gallery">
       <GalleryFeatured class="gallery__featured"
@@ -11,7 +12,8 @@
       <GalleryThumbs class="gallery__thumbs"
                      :featured-height="featuredImageHeight"
                      :galleries="galleries"
-                     :active-row="activeRow" />
+                     :active-row="activeRow"
+                     @thumbClick="handleThumbClick"/>
     </div>
   </div>
 </template>
@@ -39,13 +41,25 @@ export default {
     return {
       featuredImageHeight: '16rem',
       imageViewerIsVisible: false,
-      activeRow: 0
+      activeRow: 0,
+      activeGalleryIndex: 0,
+      activeImageIndex: 0
+    }
+  },
+
+  computed: {
+    viewingImageUrl () {
+      return this.galleries[this.activeGalleryIndex].images[this.activeImageIndex].url
     }
   },
 
   methods: {
     handleFeaturedClick (index) {
       this.activeRow = index
+    },
+    handleThumbClick(gallery, image) {
+      this.activeGalleryIndex = gallery
+      this.activeImageIndex = image
     }
   }
 }

components/GalleryThumbs.vue

@@ -19,7 +19,8 @@
           <li v-for="(image, imageIndex) in gallery.images"
               :ref="galleryIndex == 0 && imageIndex == 0 ? 'thumbContainer' : null"
               class="thumb-container"
-              :key="galleryIndex + '.' + imageIndex + '.' + image.url">
+              :key="galleryIndex + '.' + imageIndex + '.' + image.url"
+              @click="$emit('thumbClick', galleryIndex, imageIndex)">
             <ThumbNav class="thumb-nav thumb-nav--left mobile-only"
                       direction="left"
                       @navClick="handleNavClick(galleryIndex, 'left')" />
@@ -100,12 +101,14 @@ export default {
 
   methods: {
     initLeftNav () {
-      let offset = this.thumbRowOffsets[this.activeRow]
-      let totalRowWidth = this.$refs.galleryThumbsRowContainers[this.activeRow].clientWidth
-      let visibleRowWidth = this.$refs.galleryThumbsList.clientWidth
-      let maxOffset = totalRowWidth - visibleRowWidth
-      this.isLeftDesktopNavActive = (totalRowWidth > visibleRowWidth) 
-        && (offset < maxOffset)
+      if (this.$refs.galleryThumbsRowContainers[this.activeRow] && this.$refs.galleryThumbsList) {
+        let offset = this.thumbRowOffsets[this.activeRow]
+        let totalRowWidth = this.$refs.galleryThumbsRowContainers[this.activeRow].clientWidth
+        let visibleRowWidth = this.$refs.galleryThumbsList.clientWidth
+        let maxOffset = totalRowWidth - visibleRowWidth
+        this.isLeftDesktopNavActive = (totalRowWidth > visibleRowWidth) 
+          && (offset < maxOffset)
+      }
     },
     resetOffsets() {
       for (let index = 0; index < this.thumbRowOffsets.length; index++) {
@@ -254,10 +257,12 @@ export default {
 
     transition: opacity .5s;
     opacity: 0;
+    pointer-events: none;
 
     &.is-active {
       transition: opacity .5s .3s;
       opacity: 1;
+      pointer-events: auto;
     }
   }
 

components/ThumbNav.vue

@@ -1,5 +1,5 @@
 <template>
-  <div @click="$emit('navClick')">ThumbNav--{{ direction }}</div>
+  <div @click.stop="$emit('navClick')">ThumbNav--{{ direction }}</div>
 </template>
 
 <script>