Skip to content
Very simple lightbox plugin (without any dependencies) for Vuejs 🌅
Vue JavaScript HTML
Branch: master
Clone or download
Latest commit 9bb208d May 22, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Rename the prop May 5, 2019
.browserslistrc use Vue CLI for build May 3, 2019
.gitignore use Vue CLI for build May 3, 2019
.npmignore Version 0.0.12 Jul 30, 2017
LICENSE First fully-working release: v2.0.0 Jul 30, 2017
README.md Updated TOC url May 22, 2019
babel.config.js use Vue CLI for build May 3, 2019
index.html Fresh vue-webpack installation Jul 29, 2017
package-lock.json use Vue CLI for build May 3, 2019
package.json Bump version to 3.1.0 May 5, 2019
postcss.config.js use Vue CLI for build May 3, 2019

README.md

Pure JS lightbox component for Vue.js

Downloads Version License

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 × (&times;)
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

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.

You can’t perform that action at this time.