How to use blueimp-gallery - 5 common examples

showVideos(videos) {
            let ytids = [];
            for(let link of this.mod.videos) {
                let id = /[\?&]v=([^&]+)/.exec(link);

                if(id) {
                    ytids.push({
                        type: 'text/html',
                        youtube: id[1],
                        poster: 'https://img.youtube.com/vi/' + id[1] + '/maxresdefault.jpg',
                        href: 'https://www.youtube.com/watch?v=' + id[1]
                    });
                }
            }

            this.lightbox = Gallery(ytids, {
                youTubeClickToPlay: false,
                youTubePlayerVars: {
                    fs: 0,
                    vq: 'hd720'
                },
                toggleControlsOnSlideClick: false,
                onslideend: (idx, el) => {
                    // Make sure the videos start automatically.
                    let link = el.querySelector('.video-content a');
                    if(link) link.click();
                }
            });
        },

enableKeyboardNavigation : true,//是否打开键盘导航
                        toggleControlsOnReturn : false,//是否允许回车，显示/隐藏控制按钮
                        toggleControlsOnSlideClick : false,//是否允许鼠标点击图片，显示/隐藏控制按钮
                        startSlideshow : false,//是否自动开始播放图片轮播
                        onslide: function (index) {
                            that.showed(index);
                        },
                        onclosed: function () {
                            that.showed(-1);
                        }
                    },
                    main = custom ? that.$refs.links : that.$refs.innerLinks,
                    links = main.getElementsByTagName('a');
                //console.log(e);
                //console.log(link.tagName);
                gallery(links, options);
            },
            openCarousel(){

open(index = 0) {
        const instance = typeof blueimp.Gallery !== 'undefined' ? blueimp.Gallery : blueimp;

        const options = Object.assign({
          toggleControlsOnReturn: false,
          toggleControlsOnSlideClick: false,
          closeOnSlideClick: false,
          carousel: this.carousel,
          container: `#${this.id}`,
          index,
          onopen: () => this.$emit('onopen'),
          onopened: () => this.$emit('onopened'),
          onslide: this.onSlideCustom,
          onslideend: (index, slide) => this.$emit('onslideend', { index, slide }),
          onslidecomplete: (index, slide) => this.$emit('onslidecomplete', { index, slide }),
          onclose: () => this.$emit('close'),
          onclosed: () => this.$emit('onclosed'),
        }, this.options);

this.$nextTick(()=> {
                    gallery(that.list, {
                        container: that.$refs.container,
                        carousel: true,
                        toggleControlsOnSlideClick : false,
                        onslide: function (index) {
                            that.showed(index);
                        }
                    });
                });
            },

showScreens(screens) {
            this.lightbox = Gallery(this.mod.screenshots);
        },