我有这个问题,lightgallery只能打开一次。每次下次单击按钮都无响应。我正在使用lightgallery作为组件。
在我的父组件中,我有两个按钮,用于打开图像或视频库
ParentComponent.vue
<template>
<div>
<button class="btn-secondary" @click="showGallery('IMAGE')">
{{ $t('showImages') }}
</button>
<button class="btn-secondary" @click="showGallery('VIDEO')">
{{ $t('playVideo') }}
</button>
<LightGallery
v-if="galleryVisible" :gallery-items="galleryItems"
:gallery-type="galleryType" :user-subscription="userSubscription">
</LightGallery>
</div>
<template>
<script>
import LightGallery from "./subComponents/LightGallery.vue";
export default {
name: "Location",
components: {
LightGallery: LightGallery,
},
data() {
return {
// image / video slide show data
locationImages: [],
locationVideo: [],
galleryItems: {},
galleryVisible: false,
galleryType: 'IMAGE',
};
},
methods: {
showGallery(type) {
this.galleryItems = {};
this.galleryVisible = true;
this.galleryType = type;
if (type === 'IMAGE') {
this.galleryItems = this.locationImages;
} else if (type === 'VIDEO') {
this.galleryItems = this.locationVideo
}
},
hideGallery() {
this.galleryItems = {};
this.galleryVisible = false;
},
};
</script>
这是我的孩子(灯饰)组件
<template>
<div id="lightgallery">
</div>
</template>
<script>
// Light gallery
import 'lightgallery.js'
import 'lightgallery.js/dist/css/lightgallery.css'
import 'lg-zoom.js'
import 'lg-autoplay.js'
import 'lg-fullscreen.js'
import 'lg-hash.js'
import 'lg-pager.js'
import 'lg-share.js'
import 'lg-thumbnail.js'
import 'lg-video.js'
// Light gallery
export default {
name: "LightGallery",
props: {
galleryItems: {
type: Array,
required: true
},
galleryType: {
type: String,
required: true
},
userSubscription: {
type: Object,
required: false,
default: {
active: false
}
}
},
methods: {
openGallery() {
// prepare images / video to display them in lightGallery
let dynamicElements = [];
if (this.galleryType === 'IMAGE') {
this.galleryItems.forEach(function (value) {
dynamicElements.push({
src: '/' + value.hd_path,
thumb: '/' + value.thumb_path,
});
});
}
if (this.galleryType === 'VIDEO') {
this.galleryItems.forEach(function (value) {
dynamicElements.push({
src: 'https://vimeo.com/' + value.vimeo_id,
});
});
}
let lg = document.getElementById('lightgallery');
window.lightGallery(lg, {
mode: 'lg-slide',
download: false,
thumbnail: true,
dynamic: true,
dynamicEl: dynamicElements,
autoplayFirstVideo: true,
loadVimeoThumbnail: false,
});
lg.addEventListener('onCloseAfter', function (event, index, fromTouch, fromThumb) {
lg.data('lightGallery').destroy(true);
}, false);
window.lightGallery(lg);
},
},
mounted() {
this.openGallery();
}
};
</script>
问题! 在第一个“刷新”页面上,如果我单击“显示图像”或“显示视频”按钮,则画廊会打开,并且效果很好。关闭画廊时,我看到开发人员工具中的错误(可能与我的问题完全无关)
接下来每次单击按钮“显示图像”或“显示视频”将不执行任何操作。那么,如何正确销毁Lightgallery,这样我才能重新打开它?如果您需要任何其他信息,请告诉我,我会提供。谢谢!
答案 0 :(得分:1)
尝试将此行添加到showGallery方法中。
showGallery(type) {
this.galleryVisible = false // <<--- this line
this.galleryItems = {};
this.galleryVisible = true;
this.galleryType = type;
if (type === 'IMAGE') {
this.galleryItems = this.locationImages;
} else if (type === 'VIDEO') {
this.galleryItems = this.locationVideo
}
},
Light Gallery似乎只能工作一次。但是上面的代码行将重新创建Light Gallery组件,并且每次单击以下选项之一,您将拥有Light Gallery组件的一个新实例(正是页面加载中的组件)。用于启动灯库的按钮。