Pure JS lightbox component for Vue.js
Table of contents
Demo
The live demo is available here: https://codepen.io/DCzajkowski/pen/rzOErW.
Installation
With NPM:
npm i vue-pure-lightbox --save
With a CDN:
<!-- 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>
Usage
With an ES6 bundler (via NPM)
Importing a component
import VuePureLightbox from 'vue-pure-lightbox'
/* @vue/component */
export default {
components: {
// ...
VuePureLightbox,
},
}
Importing CSS styles
If you are using an ES6 bundler, you will need to manually import the styles.
Via an import
import styles from 'vue-pure-lightbox/dist/VuePureLightbox.css'
Via a <style> tag
<style src="vue-pure-lightbox/dist/VuePureLightbox.css"></style>
With a CDN
<script>
new Vue({
components: {
'vue-pure-lightbox': window.VuePureLightbox,
}
}).$mount('#app')
</script>
Simple example
<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>.
Example using content slot and custom loader
<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' },
]"
>
<div v-slot:loader>Loadingโฆ</div>
<div v-slot:content="{ url: { link, alt } }">
<img :src="link" :alt="alt">
</div>
</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>.
Available props:
| 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 |
Available slots:
| Slot | Description | Default |
|---|---|---|
| content | Default value is hen you don't want a def | <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) |
Contents
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.
License
Issues
If you find any bug or problem with the plugin please open an issue or create a pull request on the Github repo.
