Description:
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