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