91 lines
2.1 KiB
Vue
91 lines
2.1 KiB
Vue
<template>
|
|
<div>
|
|
<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
|
|
<figure
|
|
v-for="(item, index) in items"
|
|
v-show="index === 0 || !singleThumbnail"
|
|
:key="index"
|
|
class="gallery-thumbnail"
|
|
itemprop="associatedMedia"
|
|
itemscope
|
|
itemtype="http://schema.org/ImageObject"
|
|
:src="item.src"
|
|
>
|
|
<a
|
|
v-show="nbThumbnailsDisplayed === -1 || index < nbThumbnailsDisplayed"
|
|
:href="item.src"
|
|
itemprop="contentUrl"
|
|
:data-size="`${item.w}x${item.h}`"
|
|
:title="item.title"
|
|
>
|
|
<img :src="item.thumbnail" :alt="item.alt" itemprop="thumbnail" />
|
|
</a>
|
|
<render-html v-if="item.htmlAfterThumbnail" :template="item.htmlAfterThumbnail" />
|
|
</figure>
|
|
</div>
|
|
|
|
<photo-swipe-component
|
|
v-if="defaultStructure"
|
|
:options="options"
|
|
@open="$emit('open')"
|
|
@close="$emit('close')"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import PhotoSwipeComponent from './PhotoSwipeComponent.vue';
|
|
// import RenderHtml from './RenderHtml.vue';
|
|
|
|
export default {
|
|
// components: {PhotoSwipeComponent, RenderHtml},
|
|
components: {PhotoSwipeComponent},
|
|
props: {
|
|
items: {
|
|
default: [
|
|
{
|
|
src: 'http://via.placeholder.com/600x400',
|
|
thumbnail: 'http://via.placeholder.com/64x64',
|
|
w: 0,
|
|
h: 0,
|
|
alt: 'some numbers on a grey background',
|
|
htmlAfterThumbnail: '<span class="photos-date">29.12.2021</span>'
|
|
},
|
|
{
|
|
src: 'http://via.placeholder.com/1200x900',
|
|
thumbnail: 'http://via.placeholder.com/64x64',
|
|
w: 0,
|
|
h: 0,
|
|
htmlAfterThumbnail: ''
|
|
}
|
|
],
|
|
type: Array
|
|
},
|
|
options: {
|
|
default: () => ({}),
|
|
type: Object
|
|
},
|
|
singleThumbnail: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
nbThumbnailsDisplayed: {
|
|
default: -1,
|
|
type: Number
|
|
},
|
|
defaultStructure: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
}
|
|
};
|
|
|
|
</script>
|
|
<style scoped>
|
|
.gallery-thumbnail {
|
|
display: inline;
|
|
margin: 5px;
|
|
}
|
|
</style>
|
|
|