Pure JS lightbox component for Vue.js

Disclaimer

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.

Demo
Installation
- With NPM
- With a CDN
Usage
Contents
License
Issues

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' },
  ]"
>
  <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>.

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	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.

License

MIT

Issues

If you find any bug or problem with the plugin please open an issue or create a pull request on the Github repo.

DCzajkowski/vue-pure-lightbox

DCzajkowski

Reviews

Repository Details