sachinchoolur / lightGallery

A customizable, modular, responsive, lightbox gallery plugin.

Home Page:https://www.lightgalleryjs.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

image

Could you please share the Dynamic json?

same problem here... any solution?

commented

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.