Simple Javascript Image Viewer Component for Vue2

Vue imageview is a basic image viewer component that enlarges/displays your images in a responsive full-screen popup.

image viewer jquery, simple javascript image viewer, 360 degree image viewer javascript, javascript image viewer zoom pan, image viewer in html javascript

How to make use of it:

Install & Download:

$ npm install vue-imageview

Usage

<template>
  <div>
    <div id="imgBox">
      <img src="https://cdn.jsdelivr.net/gh/naihe138/myimages/img/20210523164644.jpg" alt="">
      <img src="https://cdn.jsdelivr.net/gh/naihe138/myimages/img/20210523164639.webp" alt="">
      <img src="https://cdn.jsdelivr.net/gh/naihe138/myimages/img/20210523164640.jpeg" alt="">
      <img src="https://cdn.jsdelivr.net/gh/naihe138/myimages/img/20210523164641.jpeg" alt="">
      <img src="https://cdn.jsdelivr.net/gh/naihe138/myimages/img/20210523164642.jpeg" alt="">
      <img src="https://cdn.jsdelivr.net/gh/naihe138/myimages/img/20210523164643.jpeg" alt="">
    </div>
    <ImagesView :visible.sync="show" :images="srcArr" :src="imgSrc" />
  </div>
</template>

<script>
import ImagesView from 'vue-imageview'
export default {
  components: {
    ImagesView
  },
  data() {
    return {
      show: false,
      imgSrc: '',
      srcArr: [],
      info: {}
    }
  },
  methods: {
    async getData(imgBox) {
      const imgs = imgBox.querySelectorAll('img');
      this.srcArr = Array.from(imgs).map((el) => el.src);
    }
  },
  mounted () {
    const imgBox = document.querySelector('#imgBox');
    this.getData(imgBox);
    imgBox.addEventListener('click', (e) => {
      if(e.target.nodeName == 'IMG') {
        this.imgSrc = e.target.src;
        this.show = true
      }
    })
  }
}
</script>

Basic Image Viewer, vue-imageview Plugin/Github