Easy lightbox is a Vue.js 3.0 lightbox component for images with zoom/drag/rotate/toggle.

simple lightbox jquery, responsive lightbox jquery, bootstrap lightbox, simple lightbox plugin, simple lightbox html css, vue lightbox carousel, vue fancybox

How to make use of it:

Install and download:

# NPM
$ npm install vue-easy-lightbox --save

1. Import and register the VueEasyLightbox component.

import VueEasyLightbox from 'vue-easy-lightbox';

const app = Vue.createApp({
})
app.use(VueEasyLightbox)
app.mount('#app')

2. Add the VueEasyLightbox component to the application.

<template>
  <div>
    <button @click="showSingle">Single Lightbox.</button>
    <button @click="showMultiple">Gallery Lightbox</button>
    <!-- all props & events -->
    <vue-easy-lightbox
      scrollDisabled
      escDisabled
      moveDisabled
      :visible="visible"
      :imgs="imgs"
      :index="index"
      @hide="handleHide"
    ></vue-easy-lightbox>
  </div>
</template>

export default {
  components: {
    VueEasyLightbox
  },
  data() {
    return {
      imgs: '', 
      visible: false,
      index: 0
    }
  },
  methods: {
    showSingle() {
      this.imgs = '1.jpg'
      // or
      this.imgs = {
        title: 'A placeholder',
        src: '1.jpg'
      }
      this.show()
    },
    showMultiple() {
      this.imgs = [
        '1.jpg',
        '2.jpg'
      ]
      // or
      this.imgs = [
        { title: 'Image Title', src: '1.jpg' },
        '2.jpg'
      ]
      this.index = 1 // index of imgList
      this.show()
    },
    show() {
      this.visible = true
    },
    handleHide() {
      this.visible = false
    }
  }
}

3. Component props available.

imgs: {
  type: [Array, String] as PropType<PropsImgs>,
  default: () => ''
},
visible: {
  type: Boolean,
  default: false
},
index: {
  type: Number,
  default: 0
},
scrollDisabled: {
  type: Boolean,
  default: false
},
escDisabled: {
  type: Boolean,
  default: false
},
moveDisabled: {
  type: Boolean,
  default: false
},
titleDisabled: {
  type: Boolean,
  default: false
},
teleport: {
  type: [String, Object] as PropType<TeleportProps['to']>,
  default: null
},
swipeTolerance: {
  type: Number,
  default: 50
},
loop: {
  type: Boolean,
  default: false
}

Tiny Lightbox Component For Vue, vue easy lightbox Plugin/Github

See Demo And Download

Official Website(XiongAmao): Click Here

This superior jQuery/javascript plugin is developed by XiongAmao. For extra Advanced usage, please go to the official website.