This package is not WCAG-compliant yet. It was created when the author was not aware of how important it is to be fully accessible. Proceed with caution.
The live demo is available here: https://codepen.io/DCzajkowski/pen/rzOErW.
npm i vue-pure-lightbox --save<!-- In <head> --> <meta rel="stylesheet" href="https://unpkg.com/vue-pure-lightbox/dist/VuePureLightbox.css"> <!-- In <body>, after Vue import --> <script src="https://unpkg.com/vue-pure-lightbox/dist/VuePureLightbox.umd.min.js"></script>import VuePureLightbox from 'vue-pure-lightbox' /* @vue/component */ export default { components: { // ... VuePureLightbox, }, }If you are using an ES6 bundler, you will need to manually import the styles.
import styles from 'vue-pure-lightbox/dist/VuePureLightbox.css'<style src="vue-pure-lightbox/dist/VuePureLightbox.css"></style><script> new Vue({ components: { 'vue-pure-lightbox': window.VuePureLightbox, } }).$mount('#app') </script><VuePureLightbox thumbnail="/path/to/thumbnail.jpg" :images="['/path/to/image1.jpg', '/path/to/image1.jpg']" />Note: if you are not using a vue-loader (e.g. you are using a CDN), you have to use the kebab-case'ing for the component i.e.
<vue-pure-lightbox>instead of<VuePureLightbox>.
<VuePureLightbox thumbnail="https://via.placeholder.com/350x150" :images="[ { link: 'https://placekitten.com/1080/910', alt: 'Cat 1' }, { link: 'https://placekitten.com/1080/920', alt: 'Cat 2' }, ]" > <template v-slot:loader>Loading…</template> <template v-slot:content="{ url: { link, alt } }"> <img :src="link" :alt="alt"> </template> </VuePureLightbox>Note: if you are not using a vue-loader (e.g. you are using a CDN), you have to use the kebab-case'ing for the component i.e.
<vue-pure-lightbox>instead of<VuePureLightbox>.
| Prop | Type | Value |
|---|---|---|
| thumbnail | string | Path to a file being your thumbnail |
| images | string[] or array | Array of paths to files visible in the lightbox |
| alternate-text | string | (Optional) alt="" text for your image |
| value | boolean | (Optional) reactive visibility prop |
| open-at-index | integer | (Optional) index of an image to show when opening the modal |
| Slot | Description | Default |
|---|---|---|
| content | DOM to be used in place of an image in the lightbox | <img> tag with src set to path |
| loader | DOM to be used when there is an image loading | LightboxDefaultLoader |
| icon-close | Icon to be used as a close button | × (×) |
| icon-previous | Icon to be used as the "next" arrow button |  (svg) |
| icon-next | Icon to be used as the "previous" arrow button |  (svg) |
| preview | DOM to be used in place of the default thumbnail | Clickable link with a thumbnail |
This package consists of just one .vue file. It is meant to be as small and simple as possible. In return you get a <VuePureLightbox> Vue component that allows you to show images in a nice, responsive lightbox.
Supported keys:
- Arrow right - Go to the next image
- Arrow left - Go to the previous image
- Escape key - Close the modal
- Arrow up, Arrow down and a Space Bar - inactive when the lightbox is visible
CSS is being used in the component, but each class is prefixed with a lightbox keyword. You can overwrite them as you wish.
If you find any bug or problem with the plugin please open an issue or create a pull request on the Github repo.