Vue Gallery

by von

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/js/blueimp-gallery-fullscreen.js"></script>
<script src="https://unpkg.com/[email protected]/js/blueimp-helper.js"></script>
<script src="https://unpkg.com/[email protected]/js/blueimp-gallery.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/blueimp-gallery.min.css">
<script src="https://unpkg.com/vue-gallery"></script>
<div id="app">
  <gallery :images="images" :index="index" @close="index = null"></gallery>
  <div
    class="image"
    v-for="image, imageIndex in images"
    @click="index = imageIndex"
    :style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"
  ></div>
</div>

CSS

.image {
    float: left;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    border: 1px solid #ebebeb;
    margin: 5px;
  }

JavaScript

new Vue({
  el: '#app',
  data: function () {
    return {
      images: [
        'https://dummyimage.com/800/ffffff/000000',
        'https://dummyimage.com/1600/ffffff/000000',
        'https://dummyimage.com/1280/000000/ffffff',
        'https://dummyimage.com/400/000000/ffffff',
         'https://dummyimage.com/400/000000/ffffff'
      ],
      index: null
    };
  },

  components: {
    'gallery': VueGallery
  }
});