updates

components/BackgroundImagePreloader.vue

@@ -43,7 +43,9 @@ export default {
 
   mounted () {
     if (this.imageUrls.length > 1) {
-      this.preloadImage()
+      setTimeout(() => {
+        this.preloadImage()
+      }, 100) // timeout so events get fired - don't know why that is yet TODO - investigate properly
     }
   },
 
@@ -51,8 +53,7 @@ export default {
     preloadImage () {
       this.loadImage(this.imageUrls[this.currentlyLoadingIndex])
         .then(img => {
-          this.$emit('imageLoaded', img.src)
+          this.$emit('imageLoaded', img)
-          console.log('imageloaded', img)
           this.currentlyLoadingIndex++
           if (this.currentlyLoadingIndex < this.imageUrls.length) {
             this.preloadImage()
@@ -60,12 +61,12 @@ export default {
         })
         .catch(err => {
           // TODO handle error cases
-          console.log('imageloaded ERROR', img.src)
+          console.log('imageloaded ERROR', err)
         })
     },
 
-    handleImageLoaded (img) {
+    handleImageLoaded () {
-      this.$emit('imageLoaded handler', img.src)
+      this.$emit('imageLoaded', this.imageUrls[this.activeIndex])
     }
   }
 }

components/GalleryFeatured.vue

@@ -55,6 +55,8 @@ export default {
   .gallery-featured {
     transition: opacity .3s; // TEMP
     padding: 8px;
+
+    cursor: pointer;
   }
 
   .featured-image {

components/GalleryThumbs.vue

@@ -234,6 +234,8 @@ export default {
 
   padding: 0 2px;
   background-clip: content-box;
+
+  cursor: pointer;
 }
 
 @media (max-width: $bp__layout) {

pages/services.vue

@@ -88,10 +88,6 @@ export default {
 
   methods: {
     handleMouseOver(index) {
-      // TOOD this needs to only change if the transition has finished
-      // need to emit transitionend events on the background loaders
-      // and listen for them.
-      // if waiting for an transitionend event ignore the mouseover event
       this.activeIndex = index
     },
   },