Not able to create 3 component different tabs
tarangshah19 opened this issue · comments
Description
I have three different tab for image, video and data coming dynamically i am able to open image from lightGallery but not bale to open video dynamically but if i add static video link it will work
Steps to reproduce
Clear steps describing how to reproduce the issue. Please link to
a demo project (Your website URL, codepen, or jsfiddle) if possible.
JS code that you use to initialize lightGallery.
lightGallery(document.getElementById('lightgallery'), {
... settings
});
Sample HTML markup
<template>
<div class="tab-content" id="imuw-tab-content-wrapper">
<div
class="tab-pane fade show active"
id="imuw-tab-photos-content"
role="tabpanel"
aria-labelledby="imuw-tab-photos"
>
<!-- <div class="row text-center text-lg-start mt-2">
<div
class="col-lg-3 col-md-4 col-4"
v-for="(item, index) in imageset"
:key="index"
>
<div class="card" style="width: 8rem">
<img
:src="item.mediaUrl"
class="card-img-top"
style="height: 8rem"
/>
</div>
</div>
</div> -->
<lightgallery
:settings="{ speed: 500, plugins: plugins }"
:onInit="onInit"
:onBeforeSlide="onBeforeSlide"
>
<a
v-for="(item, index) in imageset"
:key="index"
data-lg-size="1400-1400"
className="gallery-item"
:data-src="item.mediaUrl"
>
<img className="img-responsive" :src="item.mediaUrl" />
</a>
</lightgallery>
</div>
<div
class="tab-pane fade"
id="imuw-tab-audios-content"
role="tabpanel"
aria-labelledby="imuw-tab-audios"
>
<!-- <div class="row text-center text-lg-start mt-2">
<div
class="col-lg-3 col-md-4 col-4"
v-for="(item, index) in audioset"
:key="index"
>
<div class="card">
<audio
v-if="item.urlType === 'Audio'"
controlsList="nodownload"
controls
style="width: 8rem"
>
<source :src="item.mediaUrl" />
</audio>
</div>
</div>
</div> -->
<!-- <lightgallery
:settings="{ speed: 500, plugins: plugins }"
:onInit="onInit"
:onBeforeSlide="onBeforeSlide"
>
<a
v-for="(item, index) in audioset"
:key="index"
data-lg-size="1400-1400"
className="gallery-item"
:data-video='{"source": [{"src":`${item.mediaUrl}`, "type":"video/mp4"}], "attributes": {"preload": false, "controls": true}}'
>
<img className="img-responsive" :src="item.mediaUrl" />
</a>
</lightgallery> -->
</div>
<div
class="tab-pane fade"
id="imuw-tab-videos-content"
role="tabpanel"
aria-labelledby="imuw-tab-videos"
>
<!-- <div class="row text-center text-lg-start mt-2">
<div
class="col-lg-3 col-md-4 col-4"
v-for="(item, index) in videoset"
:key="index"
>
<div class="card">
<video
v-if="item.urlType === 'Video'"
controlsList="nodownload"
controls
style="width: 8rem"
>
<source :src="item.mediaUrl" />
</video>
</div>
</div>
</div> -->
<Lightgalleryvideo
:onInit="onInitSecond"
:onBeforeSlide="onBeforeSlide"
>
<a
v-for="(itemvideo, index) in videoset"
:key="index"
data-lg-size="1280-720"
:data-video='{"source": [{"src": `${itemvideo.mediaUrl}`, "type":"video/mp4"}],"attributes": {"preload": false, "playsinline": true, "controls": true}}'
data-sub-html="<h4>Thank You!</h4><p> Sample Wistia video </p>"
>
<img
width="300"
height="100"
class="img-responsive"
src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg"
/>
{{ itemvideo.mediaUrl }}
</a>
<!-- :data-video='{"source": [{"src":`${item.mediaUrl}`, "type":"video/mp4"}], "attributes": {"preload": false, "controls": true}}' -->
<!-- <a-->
<!-- v-for="(itemvideo, index) in videoset"-->
<!-- :key="index"-->
<!-- className="gallery-item"-->
<!-- -->
<!-- :data-video='{"source": [{"src":`${item.mediaUrl}`, "type":"video/mp4"}], "tracks": [{"src": "{/videos/title.txt", "kind":"captions", "srclang": "en", "label": "English", "default": "true"}], "attributes": {"preload": false, "playsinline": true, "controls": true}}'-->
<!-- >-->
<!-- <img className="img-responsive" :src="itemvideo.mediaUrl" />-->
<!-- </a>-->
</Lightgalleryvideo>
</div>
</div>
</template>
<script>
import axios from "axios";
import { mapGetters } from 'vuex';
import Lightgallery from "lightgallery/vue";
import Lightgalleryvideo from "lightgallery/vue";
import lgVideo from "lightgallery/plugins/video";
let lightGallery = null;
let lightGalleryVideo = null;
export default {
name: "multimedia",
components: {
Lightgallery,
Lightgalleryvideo
},
data() {
return {
plugins: [lgVideo],
galleryData: null,
images: [],
audios: [],
videos: [],
imageset: [],
videoset: [],
audioset: [],
// imageset: [
// { src: "https://source.unsplash.com/pWkk7iiCoDM/400x300" },
// { src: "https://source.unsplash.com/aob0ukAYfuI/400x300" },
// { src: "https://source.unsplash.com/EUfxH-pze7s/400x300" },
// { src: "https://source.unsplash.com/M185_qYH8vg/400x300" },
// { src: "https://source.unsplash.com/sesveuG_rNo/400x300" },
// { src: "https://source.unsplash.com/AvhMzHwiE_0/400x300" },
// { src: "https://source.unsplash.com/8mUEy0ABdNE/400x300" },
// { src: "https://source.unsplash.com/G9Rfc1qccH4/400x300" },
// { src: "https://source.unsplash.com/p2TQ-3Bh3Oo/400x300" },
// ],
// videoset: [
// { src: "https://www.youtube.com/embed/tgbNymZ7vqY" },
// { src: "https://www.youtube.com/embed/tgbNymZ7vqY" },
// { src: "https://www.youtube.com/embed/tgbNymZ7vqY" },
// ],
};
},
mounted() {},
async created() {
let id = this.$route.params.id;
if(id){
await this.getGalleryData(id);
}
else{
let id = this.getUserInfo._id;
await this.getGalleryData(id);
}
},
computed:{
...mapGetters("story", { getUserInfo: "getUserInfo" }),
},
watch: {
imageset(newVal, oldVal) {
this.$nextTick(() => {
lightGallery.refresh();
});
},
videoset(newVal, oldVal) {
alert('hi')
this.$nextTick(() => {
lightGalleryVideo.refresh();
});
},
},
methods: {
//image
onInit: (detail) => {
lightGallery = detail.instance;
console.log("lightGallery has been initialized");
},
//video
onInitSecond:(detailtwo)=> {
lightGalleryVideo = detailtwo.instance;
console.log("lightGallery has been initialized, djfjdfdgfjhgdfhgdfgdgf", detailtwo);
},
onBeforeSlide: () => {
console.log("calling before slide");
},
async getGalleryData(userId) {
console.log("Galeryyyyyyyyyyyyyyyyyyyy");
let imagesApiUrl = "/getAllProfileGallery/Image/" + userId;
let videosApiUrl = `/getAllProfileGallery/Video/${userId}`;
let audiosApiUrl = `/getAllProfileGallery/Audio/${userId}`;
const requestOne = axios.get(imagesApiUrl);
const requestTwo = axios.get(videosApiUrl);
const requestThree = axios.get(audiosApiUrl);
await axios
.all([requestOne, requestTwo, requestThree])
.then(
axios.spread((...responses) => {
this.imageset = responses[0].data;
this.videoset = responses[1].data;
this.audioset = responses[2].data;
// use/access the results
console.log(this.imageset, this.videoset, this.audioset);
console.log("res>>>>>>>>>>>", responses);
})
)
.catch((errors) => {
// react on errors.
console.error(errors);
});
},
},
};
</script>
<style lang="css">
@import url("https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lightgallery.css");
@import url("https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-zoom.css");
@import url("https://cdn.jsdelivr.net/npm/lightgallery@2.0.0-beta.4/css/lg-video.css");
body {
margin: 0;
}
.gallery-item {
margin: 5px;
}
</style>
Environment
- Browser and version -
- OS -
- lightGallery version -
Additional context
Hey @tarangshah19,
Could you please try calling the refresh
method after updating video items?
Doc - https://www.lightgalleryjs.com/docs/vue/#updating-slides
Thank you for replaying if even if i add refresh still not working but i am getting an error for dynamic json
Uncaught SyntaxError: Unexpected token o in JSON at position 1
at JSON.parse (<anonymous>)
at LightGallery.loadContent (lightgallery.ts:1093:55)
at LightGallery.slide (lightgallery.ts:1631:22)
at lightgallery.ts:701:18
Could you please share the Dynamic json?
same problem here... any solution?
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.