シンプルなライトボックスギャラリーコンポーネント「vue-tinybox」

by kabanoki

HTML

<link rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css">
<div id="app">
  <tinybox
    v-model="index"
    :images="images"
  ></tinybox>
  <img
        v-for="(img, idx) in images"
        :src="img.thumbnail"
        :alt="img.alt"
        class="open-tinybox img-thumbnail rounded"
        @click="index = idx"
    >
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-tinybox"></script>

CSS

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

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

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

const Tinybox = window['Tinybox'];

new Vue({
  el: '#app',
  components: {
    'tinybox': Tinybox
  },
  data: {
    index: null,
    images: [
      {
        src:'https://www.kabanoki.net/wp-content/uploads/2020/01/himan_pocchari07_ojisan.png',
        alt: 'himan_pocchari07_ojisan',
        thumbnail: 'https://www.kabanoki.net/wp-content/uploads/2020/01/himan_pocchari07_ojisan.png'	
      },
      {
        src:'https://www.kabanoki.net/wp-content/uploads/2020/01/himan_pocchari08_obasan.png',
        alt: 'himan_pocchari08_obasan',
        thumbnail: 'https://www.kabanoki.net/wp-content/uploads/2020/01/himan_pocchari08_obasan.png'	
      },
      {
        src:'https://www.kabanoki.net/wp-content/uploads/2020/01/agura_kutsurogu7_obasan.png',
        alt: 'agura_kutsurogu7_obasan',
        thumbnail: 'https://www.kabanoki.net/wp-content/uploads/2020/01/agura_kutsurogu7_obasan.png'	
      },
      {
        src:'https://www.kabanoki.net/wp-content/uploads/2020/01/agura_kutsurogu3_ojisan.png',
        alt: 'agura_kutsurogu3_ojisan',
        thumbnail: 'https://www.kabanoki.net/wp-content/uploads/2020/01/agura_kutsurogu3_ojisan.png'	
      }
    ]
  }
});