Very simple gallery lightbox

gallery.vue

<template>
  <div>
    <div class="flex flex-wrap justify-center items-center -mx-2">
      <div
        v-for="(image, index) in images"
        class="w-1/2 sm:w-1/3 md:w-1/4 lg:w-1/5 px-2 my-2">
          <img :src="image.url" :alt="image.name" @click="activateImage(index, image)">
      </div>
    </div>
    <div class="fixed pin z-40 overflow-auto bg-smoke flex" v-show="activeImage">
      <div class="relative p-8 w-full max-w-lg m-auto flex-col flex z-50" v-on-clickaway="closeModal">
        <div class="absolute pin max-w-full h-full flex items-center justify-between z-60">
          <span class="h-8 w-8 rounded-full bg-smoke hover:bg-smoke-darkest text-fog hover:text-fog-lightest fill-current flex justify-center items-center p-2" @click="changeImage('previous')">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M448 208v96c0 13.3-10.7 24-24 24H224v103.8c0 21.4-25.8 32.1-41 17L7 273c-9.4-9.4-9.4-24.6 0-34L183 63.3c15.1-15.1 41-4.4 41 17V184h200c13.3 0 24 10.7 24 24z"/></svg>
          </span>
          <span class="h-8 w-8 rounded-full bg-smoke hover:bg-smoke-darkest text-fog hover:text-fog-lightest fill-current flex justify-center items-center p-2" @click="changeImage('next')">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 304v-96c0-13.3 10.7-24 24-24h200V80.2c0-21.4 25.8-32.1 41-17L441 239c9.4 9.4 9.4 24.6 0 34L265 448.7c-15.1 15.1-41 4.4-41-17V328H24c-13.3 0-24-10.7-24-24z"/></svg>
          </span>
        </div>
        <span class="absolute pin-t pin-b pin-r p-4 mt-6 mr-6 z-70" @click="closeModal">
          <svg class="h-8 w-8 rounded-full bg-smoke hover:bg-smoke-darkest text-fog hover:text-fog-lightest fill-current" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><title>Close</title><path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z"/></svg>
        </span>
        <img :src="activeImage.url" class="w-full">
      </div>
    </div>
  </div>
</template>

<script>
const KEYCODE_ENTER = 13
const KEYCODE_ESC = 27
const KEYCODE_LEFT = 37
const KEYCODE_RIGHT = 39

import { directive as onClickaway } from 'vue-clickaway2'

export default {
  props: ['media'],
  directives: {
    onClickaway: onClickaway
  },
  data() {
    return {
      images: Object.values(this.media),
      activeImage: '',
      activeIndex: ''
    }
  },
  mounted() {
    window.addEventListener('keyup', (event) => {
      if (event.keyCode === KEYCODE_ESC && this.activeImage) {
        this.closeModal()
      }

      if (event.keyCode === KEYCODE_LEFT && this.activeImage) {
        this.changeImage('previous')
      }

      if (event.keyCode === KEYCODE_RIGHT && this.activeImage) {
        this.changeImage('next')
      }
    })
  },
  methods: {
    activateImage(index, image) {
      this.activeImage = image
      this.activeIndex = parseInt(index)
    },
    closeModal(e) {

      if (typeof(e) === 'undefined') {
        this.activeImage = false
        return
      }

      let target = ''
      if (e.target) {
        target = e.target.localName
      }
      if (e.srcElement) {
        target = e.srcElement.localName
      }

      if (target !== 'img') {
        this.activeImage = false
      }
    },
    changeImage(direction) {
      let index = this.activeIndex
      let count = this.images.length - 1

      if (this.images.length > 1) {
        if (direction == 'next') {
          if (index == count) {
            index = 0
          } else {
            index++
          }
        }
        if (direction == 'previous') {
          if (index == 0) {
            index = count
          } else {
            index--
          }
        }
        this.activeImage = this.images[index]
        this.activeIndex = index
      }
    }
  }
}
</script>