Accessible Image Lightbox Component For Vue.js

A simple, accessible image lightbox (gallery) component for Vue.js.

How to use it:

1. Import and register the lightbox component.

import VuePureLightbox from 'vue-pure-lightbox'
import styles from 'vue-pure-lightbox/dist/VuePureLightbox.css'

export default {
  components: {
    VuePureLightbox,
  },
  // ...
}

2. Add the VuePureLightbox component to the app and define the paths to images as follows:

<VuePureLightbox
  thumbnail="thumbnail.jpg"
  :images="['1.jpg', '2.jpg', '3.jpg']"
/>

<!-- With Image Alts -->
<VuePureLightbox
  thumbnail="thumb.jpg"
  :images="[
    { link: '1.jpg', alt: 'Image Alt 1' },
    { link: '2.jpg', alt: 'Image Alt 2' },
    { link: '3.jpg', alt: 'Image Alt 3' },
  ]"
>
  <div v-slot:loader>Loading...</div>
  <div v-slot:content="{ url: { link, alt } }">
    <img :src="link" :alt="alt">
  </div>
</VuePureLightbox>

3. Available component props.

thumbnail: {
  type: String,
  default: null,
},
images: {
  type: Array,
},
openAtIndex: {
  type: Number,
  default: 0,
},
alternateText: {
  type: String,
  default: '',
},
value: {
  type: Boolean,
  default: false,
},

4. Available slots.

• content
• loader
• icon-close
• icon-previous
• icon-next
• preview

Preview:

Changelog:

05/06/2022

• v3.2.0

Download Details:

Author: DCzajkowski

Live Demo: https://codepen.io/DCzajkowski/pen/rzOErW

Download Link: https://github.com/DCzajkowski/vue-pure-lightbox/archive/master.zip

Official Website: https://github.com/DCzajkowski/vue-pure-lightbox

Install & Download:

npm i vue-pure-lightbox --save