108 lines
3.3 KiB
Vue
108 lines
3.3 KiB
Vue
<template>
|
|
<img
|
|
:items="items"
|
|
class="fancy"
|
|
:src="filename"
|
|
:width="imgW"
|
|
:height="imgH"
|
|
@load="loadImage"
|
|
@error="onImgError()"
|
|
@click="$emit('imageClick', $event)"
|
|
>
|
|
</template>
|
|
|
|
<script>
|
|
import PathMixin from '../mixins/PathMixin.js'
|
|
import defaultImageMixin from '../mixins/defaultImageMixin.js'
|
|
// import VuePictureSwipe from './vue3-picture-swipe/VuePictureSwipe.vue';
|
|
// import VuePictureSwipe from './vue3-picture-swipe/main.js';
|
|
|
|
export default {
|
|
mixins: [PathMixin, defaultImageMixin],
|
|
components: {
|
|
// 'vue-picture-swipe': VuePictureSwipe,
|
|
},
|
|
props: {
|
|
imgOffset: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
container: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
prefix: {
|
|
type: String,
|
|
required: true,
|
|
default: '',
|
|
}
|
|
},
|
|
data: function () {
|
|
return {
|
|
imgWidth: 1,
|
|
imgHeight: 1,
|
|
imgError: false,
|
|
// items: [{
|
|
// src: 'http://via.placeholder.com/600x400',
|
|
// thumbnail: 'http://via.placeholder.com/64x64',
|
|
// w: 600,
|
|
// h: 400,
|
|
// alt: 'some numbers on a grey background' // optional alt attribute for thumbnail image
|
|
// },
|
|
// {
|
|
// src: 'http://via.placeholder.com/1200x900',
|
|
// thumbnail: 'http://via.placeholder.com/64x64',
|
|
// w: 1200,
|
|
// h: 900,
|
|
// htmlAfterThumbnail: '<span class="photos-date">29.12.2021</span>' // optional, insert your html after tag <a> if you need it
|
|
// }],
|
|
}
|
|
},
|
|
methods: {
|
|
onImgError() {
|
|
this.imgError = true;
|
|
},
|
|
loadImage(img) {
|
|
// img.target.dataset.origw = img.srcElement.naturalWidth;
|
|
// img.target.dataset.origh = img.srcElement.naturalHeight;
|
|
img.target.dataset.fullp = this.marktplatzCDNPath(this.$store.state.details.ident_nr_kunde, this.$store.state.details.ident_nr_standort) + this.$store.state.details.rel_pictures[this.imgOffset]['datei'];
|
|
var c = this.$parent.$refs[this.container];
|
|
if(Array.isArray(c)) {
|
|
c = c[0];
|
|
}
|
|
var maxH = c.clientHeight;
|
|
var maxW = c.clientWidth;
|
|
var imgW = img.srcElement.naturalWidth;
|
|
var imgH = img.srcElement.naturalHeight;
|
|
var t1 = maxW / imgW;
|
|
var t2 = maxH / imgH;
|
|
if(t1 > t2) {
|
|
this.imgWidth = imgW * t2;
|
|
this.imgHeight = imgH * t2;
|
|
}else{
|
|
this.imgWidth = imgW * t1;
|
|
this.imgHeight = imgH * t1;
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
},
|
|
computed: {
|
|
imgW: function() {
|
|
return this.imgWidth;
|
|
},
|
|
imgH: function() {
|
|
return this.imgHeight;
|
|
},
|
|
pSize() {
|
|
},
|
|
filename() {
|
|
if(this.$store.state.details.rel_pictures[this.imgOffset]){
|
|
return (this.imgError) ? this.getDefaultImage(this.$store.state.details.modell_kategorie) : this.marktplatzCDNPath(this.$store.state.details.ident_nr_kunde, this.$store.state.details.ident_nr_standort) + this.prefix + this.$store.state.details.rel_pictures[this.imgOffset]['datei'];
|
|
}else{
|
|
return this.getDefaultImage(this.$store.state.details.modell_kategorie);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script> |