Add vue gallery

src/components/Photo.vue

@@ -2,7 +2,8 @@
   <transition appear name="fade">
     <div class="photo"
         :style="photoStyle"
-        ref="element">
+        ref="element"
+        @click="onClick">
     </div>
   </transition>
 </template>
@@ -49,6 +50,10 @@ export default class Photo extends Vue {
     }
   }
 
+  onClick() {
+    this.$emit('clickPhoto', this.album.files.indexOf(this.file));
+  }
+
   mounted() {
     this.updateHeight();
   }

src/views/Album.vue

@@ -6,15 +6,25 @@
       :picture="picture"></LeftBlock>
     <div class="photos-wrapper">
       <div class="photos" v-if="album !== null">
-        <Photo v-for="file in filesToShow" :key="file" :file="file" :album="album"></Photo>
+        <Photo v-for="file in filesToShow" :key="file" :file="file" :album="album"
+               @clickPhoto="clickPhoto"></Photo>
       </div>
     </div>
+    <vue-gallery v-if="album !== null"
+                 :options="options" 
+                 :images="images" 
+                 :index="index" 
+                 @close="index = null">
+      <slot name="next">Next</slot>
+    </vue-gallery>
   </div>
 </template>
 
 <script lang="ts">
 import 'reflect-metadata';
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
+import { Vue, Component, Prop, Watch, Ref } from 'vue-property-decorator';
+
+import VueGallery from 'vue-gallery';
 
 import { StoreType } from '@/store';
 import { IAlbum } from '@/store/albums/state';
@@ -28,11 +38,16 @@ import Photo from '@/components/Photo.vue';
   components: {
     LeftBlock,
     Photo,
+    VueGallery,
   }
 })
 export default class AlbumPage extends Vue {
   public filesToShow: string[] = [];
 
+  public index: number | null = null;
+  
+  public options: object = {};
+
   get album(): IAlbum | null {
     const albums = (this.$store as StoreType).state.albums.albums;
 
@@ -62,7 +77,12 @@ export default class AlbumPage extends Vue {
   get picture(): string {
     if (this.album === null)
       return '';
-    return `/pictures/albums/${this.album.folderName}/${this.album.coverFileName}`
+    return `/pictures/albums/${this.album.folderName}/${this.album.coverFileName}`;
+  }
+
+  get images() {
+    return this.album!.files
+    .map(item => `/pictures/albums/${this.album!.folderName}/${item}`);
   }
 
   updateFiles() {
@@ -81,8 +101,14 @@ export default class AlbumPage extends Vue {
     this.updateFiles();
   }
 
+  clickPhoto(index: number) {
+    this.index = index;
+  }
+
   mounted() {
     this.updateFiles();
+
+    this.$on('clickPhoto', this.clickPhoto);
   }
 }
 </script>
@@ -112,3 +138,11 @@ export default class AlbumPage extends Vue {
   flex-wrap: wrap;
 }
 </style>
+
+<style>
+.blueimp-gallery>.next, .blueimp-gallery>.prev {
+  border: none;
+  background: none;
+  color: white!important;
+}
+</style>