search

sachinchoolur / lightGallery

A customizable, modular, responsive, lightbox gallery plugin.
https://www.lightgalleryjs.com/
Other
6.54k stars 1.29k forks source link

Not able to create 3 component different tabs #1319

Closed tarangshah19 closed 2 years ago

tarangshah19 commented 2 years ago

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

Additional context

sachinchoolur commented 2 years ago

Hey @tarangshah19,

Could you please try calling the refresh method after updating video items?

Doc - https://www.lightgalleryjs.com/docs/vue/#updating-slides

tarangshah19 commented 2 years ago

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

image

sachinchoolur commented 2 years ago

Could you please share the Dynamic json?

bgomes90 commented 2 years ago

same problem here... any solution?

stale[bot] commented 2 years ago

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.