Tiny Lightbox Component For Vue.js – easy-lightbox

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: true
},
escDisabled: {
  type: Boolean,
  default: false
},
moveDisabled: {
  type: Boolean,
  default: false
},
titleDisabled: {
  type: Boolean,
  default: false
},
maskClosable: {
  type: Boolean,
  default: true
},
teleport: {
  type: [String, Object] as PropType<TeleportProps['to']>,
  default: null
},
swipeTolerance: {
  type: Number,
  default: 50
},
loop: {
  type: Boolean,
  default: false
},
rtl: {
  type: Boolean,
  default: false
},
zoomScale: {
  type: Number,
  default: 0.12
},
maxZoom: {
  type: Number,
  default: 3
},
minZoom: {
  type: Number,
  default: 0.1
},
rotateDisabled: {
  type: Boolean,
  default: false
}
zoomDisabled: {
  type: Boolean,
  default: false
}
pinchDisabled: {
  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:

Changelog:

v1.16.0 (04/16/2023)

• Feat: Add pinchDisabled (default: false) prop to disable pinching.

v1.15.0 (03/18/2023)

• Feat: Support types condition in package.json exports field.

v1.14.0 (02/28/2023)

• Feat: Add zoomDisabled prop to disable image zooming.

v1.13.0 (02/23/2023)

• Feat: Add rotateDisabled prop to disable the rotation of the image.

v1.11.0 (11/26/2022)

• Fix: overflow-y:hidden is not removed before unmounting component.

v1.10.0 (11/04/2022)

• Feat: Add minZoom to specify the minimum level of zoom scale.

v1.9.0 (10/09/2022)

• Feat: Add on-rotate event, which returns the clockwise angle (deg: number) when the event emit.

v1.8.1/2 (08/29/2022)

• Bugfixes

v1.8.0 (08/12/2022)

• Feat: Add maxZoom zoomScale to specify the zoom level.

v1.7.1 (07/26/2022)

• Fix: The default parameters of useEasyLightbox() is missing.

v1.7.0 (07/17/2022)

• Feat: Add composable useEasyLightbox() for setup().

v1.6.0 (07/15/2022)

• Breaking Change: ES5 bundles is removed.
• Feat: Add some A11y attrs.
• Feat(type): Add emits type declaration.

v1.5.0 (07/04/2022)

• Feat: Enable or disable click mask to close vue-easy-lightbox.

v1.4.1 (03/07/2022)

• Feat: Reduced zoom in/out ratio.
• Feat: Zooming by mouse wheel is available only when scrollDisabled is true.
• Breaking Change: scrollDisabled now defaults to true.

v1.4.0 (03/07/2022)

• Feat: Support zoom by mouse wheel.
• Feat: Support double click to enlarge img.

v1.3.0 (02/03/2022)

• Feat: Support RTL (right to left) languages.

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