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.