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

gallery thumb background images implemented

This commit is contained in:
ManjaroOne666 2019-01-10 14:44:28 +00:00
parent cb0836afdb
commit d96fc36ded
3 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/GalleryPage.vue
View File

@ -57,6 +57,10 @@ export default {
} }
}, },
mounted () {
window.addEventListener('resize', () => { this.imageViewerIsVisible = false })
},
methods: { methods: {
handleFeaturedClick (index) { handleFeaturedClick (index) {
this.activeRow = index this.activeRow = index

9
components/GalleryThumbs.vue
View File

@ -19,6 +19,7 @@
<li v-for="(image, imageIndex) in gallery.images" <li v-for="(image, imageIndex) in gallery.images"
:ref="galleryIndex == 0 && imageIndex == 0 ? 'thumbContainer' : null" :ref="galleryIndex == 0 && imageIndex == 0 ? 'thumbContainer' : null"
class="thumb-container" class="thumb-container"
:style="{ 'background-image': 'url(' + image.thumbUrl + ')' }"
:key="galleryIndex + '.' + imageIndex + '.' + image.url" :key="galleryIndex + '.' + imageIndex + '.' + image.url"
@click="$emit('thumbClick', galleryIndex, imageIndex)"> @click="$emit('thumbClick', galleryIndex, imageIndex)">
<ThumbNav class="thumb-nav thumb-nav--left mobile-only" <ThumbNav class="thumb-nav thumb-nav--left mobile-only"
@ -173,6 +174,11 @@ export default {
margin: 0; margin: 0;
} }
.thumb-container {
background-size: cover;
background-position: center center;
}
@media (max-width: $bp__layout) { @media (max-width: $bp__layout) {
.mobile-hide { .mobile-hide {
display: none; display: none;
@ -198,6 +204,9 @@ export default {
position: relative; position: relative;
height: calc(50vh - #{$site-menu__header-height / 2}); height: calc(50vh - #{$site-menu__header-height / 2});
width: 100vw; width: 100vw;
background-size: cover;
background-position: center center;
} }
.thumb-nav { .thumb-nav {

6
pages/galleries.vue
View File

@ -20,9 +20,9 @@ export default {
featuredImage: 'https://via.placeholder.com/600x400/665588/ffffff?text=Featured+Gallery+Zero', featuredImage: 'https://via.placeholder.com/600x400/665588/ffffff?text=Featured+Gallery+Zero',
images: [ images: [
{ thumbUrl: 'https://via.placeholder.com/400x300/885566/ffffff', url: 'https://via.placeholder.com/1920x1080/885566/ffffff?text=Zero0' }, { thumbUrl: 'https://via.placeholder.com/400x300/885566/ffffff', url: 'https://via.placeholder.com/1920x1080/885566/ffffff?text=Zero0' },
{ thumbUrl: 'https://via.placeholder.com/400x300/668855/ffffff', url: 'https://via.placeholder.com/1920x1080/668855/ffffff?text=Zero1' }, { thumbUrl: 'https://via.placeholder.com/300x400/668855/ffffff', url: 'https://via.placeholder.com/1080x1920/668855/ffffff?text=Zero1' },
{ thumbUrl: 'https://via.placeholder.com/400x300/558866/ffffff', url: 'https://via.placeholder.com/1920x1080/558866/ffffff?text=Zero2' }, { thumbUrl: 'https://via.placeholder.com/400x400/558866/ffffff', url: 'https://via.placeholder.com/1200x1200/558866/ffffff?text=Zero2' },
{ thumbUrl: 'https://via.placeholder.com/400x300/886655/ffffff', url: 'https://via.placeholder.com/1920x1080/886655/ffffff?text=Zero3' } { thumbUrl: 'https://via.placeholder.com/320x180/886655/ffffff', url: 'https://via.placeholder.com/1600x900/886655/ffffff?text=Zero3' }
] ]
}, },
{ title: 'Gallery One', { title: 'Gallery One',