Vue.jsのLightboxは「vue-image-lightbox」で簡単に実装できる

by kabanoki

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-image-lightbox.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-image-lightbox.min.js"></script>
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<div id="app">
  <ul>
    <li v-for="(img,i) in images" @click="show(i)"><img :src="img.thumb"></li>
  </ul>
  <light-box 
    ref="lightbox"
    :images="images"
    :show-light-box="false"
    :show-caption="true"></light-box>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

CSS

body {
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  display:inline-block;
  border:1px solid #ddd;
  margin: 5px;
}

Vue

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'https://dummyimage.com/130x120/ccc/999.png&text=Not+Found',
  loading: 'https://dummyimage.com/130x120/dcdcdc/999.png&text=Now loading',
  attempt: 1
});

const LightBox = window.Lightbox.default;

Vue.component('light-box', LightBox);

let app = new Vue({
  el: '#app',
  data: {
    images: [
      {
        thumb: 'https://dummyimage.com/150x150/fcc/000.png&text=thumb1',
        src: 'https://dummyimage.com/600x600/fcc/000.png&text=Uploaded1',
        caption: 'キャプション1'
      },
      {
        thumb: 'https://dummyimage.com/150x150/fcc/000.png&text=thumb2',
        src: 'https://dummyimage.com/600x600/fcc/000.png&text=Uploaded2',
        caption: 'キャプション2'
      },
      {
        thumb: 'https://dummyimage.com/150x150/fcc/000.png&text=thumb3',
        src: 'https://dummyimage.com/600x600/fcc/000.png&text=Uploaded3',
        caption: 'キャプション3'
      }
    ]
  },
  methods: {
    show: function(index){
      this.$refs.lightbox.showImage(index)
    }
  }
});