Tiny Lightbox Component For Vue.js - easy-lightbox

Install & Download:

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

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: 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
},
dblclickDisabled: {
  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.19.0 (03/05/2024)

Fix: Unexpected body overflow unlock

v1.18.0 (02/18/2024)

Fix: Nuxt3 build warning

v1.17.0 (12/23/2023)

Feat: Add dblclickDisabled prop to disable double click.
Feat: Add prop currentImg: {} to img title slot.

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)