I am facing an issue where lightgallery can only be opened once. Subsequent clicks on the button are unresponsive. The lightgallery is being used as a component.
Within my parent component, I have two buttons for opening image or video gallery
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>
This is my child component for lightgallery
<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() {
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>
The Issue! Upon initial page load, when I click on the Show images or Play video buttons, the gallery opens and functions correctly. However, upon closing the gallery, I encounter an error in the developer tools (which may be unrelated to my issue).
https://i.sstatic.net/59Twn.png
Subsequent clicks on the Show images or Play video buttons do not trigger any action. How can I properly destroy Lightgallery so that I can reopen it? If you require additional information, please let me know and I will provide it. Thank you!