galleries: scroll to gallery thumb on page load

components/GalleryFeatured.vue

@@ -1,6 +1,7 @@
 <template>
   <ul class="gallery-featured">
     <li v-for="(gallery, index) in galleries"
+        ref="galleries"
         class="featured-image thumb-overlay selected-indicator"
         :class="{ 'is-active': index === galleryActive }"
         :style="{ 'background-image': 'url(' + gallery.featuredImage + ')' }"
@@ -26,6 +27,10 @@ export default {
       },
     }
   },
+
+  mounted () {
+    this.$refs.galleries[this.galleryActive].scrollIntoView({behavior: 'smooth'})
+  },
 }
 </script>
 

components/GalleryPage.vue

@@ -55,10 +55,28 @@ export default {
 
   computed: {
     viewingImageUrl () {
-      return this.galleries[this.activeGalleryIndex].images[this.activeImageIndex].url
+      if (
+        this.galleries[this.activeGalleryIndex]
+        && this.galleries[this.activeGalleryIndex].images 
+        && this.galleries[this.activeGalleryIndex].images[this.activeImageIndex]
+      ) {
+        console.log('found')
+        return this.galleries[this.activeGalleryIndex].images[this.activeImageIndex].url
+      } else {
+        console.log('not found')
+        // TOOD return 404 page - does this do it?
+        throw({ statusCode: 404, message: 'Image Not Found' })
+      }
     }
   },
 
+  created () {
+    let query = this.$route.query
+    this.activeGalleryIndex = query.gallery ? parseInt(query.gallery) : 0
+    this.activeRow = this.activeGalleryIndex
+    this.activeImageIndex = query.image ? parseInt(query.image) : 0
+  },
+
   mounted () {
     window.addEventListener('resize', () => { this.imageViewerIsVisible = false })
   },

pages/services.vue

@@ -53,28 +53,28 @@ export default {
           'imageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-portraits.jpg',
           'backgroundImageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-portraits.jpg',
           'html': '<p>Corporate portraits and publicity photos for printed materials, including annual reports and newsletters.</p>',
-          'linkUrl': '#',
+          'linkUrl': 'galleries?gallery=0',
         },
         {
           'heading': 'Dance',
           'imageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-dance.jpg',
           'backgroundImageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-dance.jpg',
           'html': '<p>Photography and video production of dancers and performances for print, web, and promotion.</p>',
-          'linkUrl': '#',
+          'linkUrl': 'galleries?gallery=1',
         },
         {
           'heading': 'Music',
           'imageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-music.jpg',
           'backgroundImageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-music.jpg',
           'html': '<p>Photography and video of musical performances and portraits for print and the web, CD covers, and publicity photos.</p>',
-          'linkUrl': '#',
+          'linkUrl': 'galleries?gallery=2',
         },
         {
           'heading': 'Events',
           'imageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-events.jpg',
           'backgroundImageUrl': 'https://marcleopold.isnet.uk/wp-content/uploads/2017/07/services-events.jpg',
           'html': '<p>Photography and video production for your corporate, organisational and personal events and celebrations.</p>',
-          'linkUrl': '#',
+          'linkUrl': 'galleries?gallery=3',
         },
       ]
     }