rayelliott
/
marc-leopold
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

galleries: scroll to gallery thumb on page load

This commit is contained in:
ManjaroOne666 2019-01-28 12:04:41 +00:00
parent 5832cea526
commit 79fa211995
3 changed files with 28 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/GalleryFeatured.vue
View File

@ -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>

18
components/GalleryPage.vue
View File

@ -55,8 +55,26 @@ export default {
computed: {
viewingImageUrl () {
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 () {

8
pages/services.vue
View File

@ -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',
},
]
}