Tiny Lightbox Component For Vue.js – easy-lightbox

Description:

A lightbox component for Vue.js 3 applications, with drag, zoom, rotate support.

How to use it:

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 app.

<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. Available component props.

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
}

4. Event handlers.

  • hide
  • on-error(e)
  • on-prev(oldIndex, newIndex)
  • on-next(oldIndex, newIndex)
  • on-prev-click(oldIndex, newIndex)
  • on-next-click(oldIndex, newIndex)
  • on-index-change(oldIndex, newIndex)

Preview:

Tiny Lightbox Component For Vue.js - easy-lightbox

Changelog:

v1.2.4 (09/19/2021)

  • Fix: Firefox Dragging issues

v1.2.3 (08/17/2021)

  • Feat: Make vue-devtool display named components.
  • Fix: Can’t get toolbarMethods from slot props.

v1.2.1 (06/15/2021)

  • Fix: Detect window incorrect on server side.

v1.2.0 (05/16/2021)

  • Feat: Add loop prop to enable loop switching of image.
  • Feat: Add scrollDisabled prop to disable scrolling when modal is visible.
  • Feat: When moveDisabled is set to true, it is possible to switch images by swiping.
  • Feat: Add swipeTolerance prop for swipe distance detection.
  • Feat: on-prev-click/on-next-click is renamed to on-prev/ on-next, the old event name is kept and you can still use it.

v1.1.0 (04/11/2021)

  • Provides a new prop teleport to solve css style problems in some cases. teleport allows you to customize the mount node.

v1.0.0 (04/10/2021)

  • Feat: New animation throttling.
  • Feat: d.ts for .tsx.
  • Feat: Small size.
  • Fix: css class typos.
  • Fix: Touch event handler error may occur in some cases.
  • Fix: Scroll chaining when touchmove.
  • Fix: Img may be blurred in some cases.

v0.14.0 (07/11/2020)

  • Fix: Syntax error on IE11.

Download Details:

Author: XiongAmao

Live Demo: https://onycat.com/vue-easy-lightbox/

Download Link: https://github.com/XiongAmao/vue-easy-lightbox/archive/master.zip

Official Website: https://github.com/XiongAmao/vue-easy-lightbox

Install & Download:

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

You Might Be Interested In:

Add Comment