How to dynamically populate gallery in VUE

[drosendo]

I have the following:

  mounted: function() {
    var _this = this;

    $("#ABCD").click(function() {
      var $thumbs = [];
      $.each(_this.image, function(i, v) {
        $thumbs.push({
          src: v.single.full_image,
          thumb: v.thumb.src
        });
      });

      var img = $(this)
        .find("img")
        .attr("data-zoom-image");

      var indexImg = $("#ABCD_GAL").find('li[data-src="' + img + '"]')
        ? $("#ABCD_GAL")
            .find('li[data-src="' + img + '"]')
            .index()
        : 0;

      lightGallery(document.getElementById("ABCD_GAL"), {
        dynamic: true,
        //thumbnail: true,
        dynamicEl: $thumbs,
        index: indexImg
      });

    });
  }

Now I know I should probably destroy lightGallery on close so that I can trigger a new open, but I cant figure out how to destroy it when created via: lightGallery(document.getElementById("ABCD_GAL"),{});

Please help.

Cheers, David

[sachinchoolur]

Hey David, Are you using lightGallery.js? If yes, Try the following code.

var el = document.getElementById("ABCD_GAL");
lightGallery(el, {
        dynamic: true,
        //thumbnail: true,
        dynamicEl: $thumbs,
        index: indexImg
      });

// To destroy 
window.lgData[el.getAttribute('lg-uid')].destroy();

Docs: https://sachinchoolur.github.io/lightgallery.js/docs/api.html#methods Demo: https://sachinchoolur.github.io/lightgallery.js/demos/methods.html

[drosendo]

Great! thanks!

[valjar]

@drosendo Is there an option you could display whole code, not just mounted part?

I'm also struggling to add lightGallery to my vuejs project and it would be most helpful if you paste whole code. Thank you

[drosendo]

Hey @valjar ,

I have something along this lines:

Vue.prototype.lightGallery = function () {
        var _this = this;
        var $lg = $(this.$el);
        var imgClick = $(this.$root).find(".Ligthgallery");

        imgClick.click(function () {
            var _thisClick = this;
            var $thumbs = [];
            var images = [{},{},{}]; //IMAGE OBJECTS
            var indexImg,$video_controls,$video_loop,$video_mute; //SOME GLOBAL OPTIONS

            $.each(images, function (i, v) {
                if (v.video) {
                    var videoObj = _this.parseVideo(v.video); // Function to parse video data
                    if (videoObj.type == "youtube" || videoObj.type == "vimeo") {
                        $thumbs.push({
                            src: v.video,
                            thumb: v.thumb.src,
                            poster: v.single.full_image
                        });
                    } else {
                        var $iframe = $("<video />", {
                            id: "go_video",
                            class: "lg-video-object lg-html5",
                            //poster: v.single.large_image,
                            //src: v.video,
                            html: '<source src="' + v.video + '" type="video/mp4">Your browser does not support HTML5 video',
                            //type: "video/mp4",
                            controls: $video_controls ? true : false, //IF VIDEO CONTROLS ACTIVE
                            autoplay: false,
                            loop: $video_loop ? true : false, //IF VIDEO LOOP ACTIVE
                            preload: "none",
                            muted: $video_mute //IF VIDEO MUTE ACTIVE
                        });
                        $thumbs.push({
                            thumb: v.single.large_image,
                            html: $($iframe)[0].outerHTML
                        });
                    }
                } else {
                    $thumbs.push({
                        src: v.single.full_image,
                        thumb: v.thumb.src,
                        subHtml: lightbox_title ? v.thumb.title : "" //IF TITLE ACTIVE
                    });
                }
            });

                    indexImg = $(_thisClick).closest('li').index(); //Get clicked image index

            if (indexImg < 0) indexImg = 0;

            _this.$lightGallery.dynamicEl = $thumbs;
            _this.$lightGallery.index = indexImg;

            $lg.lightGallery(_this.$lightGallery);

            $lg.one("onCloseAfter.lg", function () {
                $lg.data("lightGallery").destroy(true);
            });

        });
    };

Cheers, David

[valjar]

Super! Thank you so much for this!