Vue-element-admin: 老潘，能否集成一下 lightgallery.js

[ifu25]

今天发现一个图片浏览插件不错，lightgallery.js（有.js和没有.js是两个版本），之前用的 photoswipe有点小问题（点击关闭图片跳到404）于是想换这个。可是弄了半天老报错，于是想到你了，能否集成一下。这两个无论哪个都可以。
😘😘

https://sachinchoolur.github.io/lightgallery.js/

[ifu25]

<template>
  <div class="app-container">
    <div id="lightgallery">
      <a href="https://dzine.io/products/lightgallery-wp-plugin/static/images/demo/image-6-lg.jpg">
        <img src="https://dzine.io/products/lightgallery-wp-plugin/static/images/demo/thumb-6.jpg" />
      </a>
      <a href="https://dzine.io/products/lightgallery-wp-plugin/static/images/demo/image-12-lg.jpg">
        <img src="https://dzine.io/products/lightgallery-wp-plugin/static/images/demo/thumb-12.jpg" />
      </a>
    </div>
  </div>
</template>

<script>
import 'lightgallery.js/dist/css/lightgallery.css'
import lightGallery from 'lightgallery.js'

export default {
  name: 'IssueDetail',
  data() {
    return {
      imageList: []
    }
  },
  mounted() {
    const el = document.getElementById('lightgallery')
    console.log(lightGallery)
    lightGallery(el)
  }
}
</script>

[PanJiaChen]

它依赖 jQuery的，你正确安装jQuery了么。

[ifu25]

lightgallery依赖jq，lightgallery.js不依赖

[PanJiaChen]

import 'lightgallery.js'
import 'lightgallery.js/dist/css/lightgallery.css'

export default {
  name: 'IssueDetail',
  data() {
    return {
      imageList: []
    }
  },
  mounted() {
    const el = document.getElementById('lightgallery')
    window.lightGallery(el)
  }
}

[ifu25]

天呢，原来是这样用。非常感谢。
搞定了！

[ifu25]

@PanJiaChen 再请教下，我在dialogForm上放的图片缩略图，点击后lightgallery插件打开大图浏览模式了，但dialogForm还在上面呢。

[ifu25]

搞定了，要改下z-index，要比el的dialog大才行。

<style>
.lg-backdrop {
  z-index: 5000;
}
.lg-outer {
  z-index: 5001;
}
</style>