updates
This commit is contained in:
parent
b094a2f787
commit
9c4db9d0f9
|
@ -43,7 +43,9 @@ export default {
|
||||||
|
|
||||||
mounted () {
|
mounted () {
|
||||||
if (this.imageUrls.length > 1) {
|
if (this.imageUrls.length > 1) {
|
||||||
|
setTimeout(() => {
|
||||||
this.preloadImage()
|
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 () {
|
preloadImage () {
|
||||||
this.loadImage(this.imageUrls[this.currentlyLoadingIndex])
|
this.loadImage(this.imageUrls[this.currentlyLoadingIndex])
|
||||||
.then(img => {
|
.then(img => {
|
||||||
this.$emit('imageLoaded', img.src)
|
this.$emit('imageLoaded', img)
|
||||||
console.log('imageloaded', img)
|
|
||||||
this.currentlyLoadingIndex++
|
this.currentlyLoadingIndex++
|
||||||
if (this.currentlyLoadingIndex < this.imageUrls.length) {
|
if (this.currentlyLoadingIndex < this.imageUrls.length) {
|
||||||
this.preloadImage()
|
this.preloadImage()
|
||||||
|
@ -60,12 +61,12 @@ export default {
|
||||||
})
|
})
|
||||||
.catch(err => {
|
.catch(err => {
|
||||||
// TODO handle error cases
|
// 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])
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -55,6 +55,8 @@ export default {
|
||||||
.gallery-featured {
|
.gallery-featured {
|
||||||
transition: opacity .3s; // TEMP
|
transition: opacity .3s; // TEMP
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.featured-image {
|
.featured-image {
|
||||||
|
|
|
@ -234,6 +234,8 @@ export default {
|
||||||
|
|
||||||
padding: 0 2px;
|
padding: 0 2px;
|
||||||
background-clip: content-box;
|
background-clip: content-box;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: $bp__layout) {
|
@media (max-width: $bp__layout) {
|
||||||
|
|
|
@ -88,10 +88,6 @@ export default {
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
handleMouseOver(index) {
|
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
|
this.activeIndex = index
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue