Skip to content

Very simple lightbox plugin (without any dependencies) for Vuejs πŸŒ…

License

Notifications You must be signed in to change notification settings

keesvanlierop/vue-pure-lightbox

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

48 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

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/vue-pure-lightbox.css">
<!-- In <body>, after Vue import -->
<script src="https://unpkg.com/vue-pure-lightbox/dist/vue-pure-lightbox.js"></script>

Usage

With an ES6 bundler (via NPM)

In your index file

import Lightbox from 'vue-pure-lightbox'
Vue.use(Lightbox)

With a CDN

<script>
  Vue.use(Lightbox)

  new Vue({
    // ...
  })
</script>

Simple example

<lightbox
  thumbnail="/path/to/thumbnail.jpg"
  :images="['/path/to/image1.jpg', '/path/to/image1.jpg']"
>
  <lightbox-default-loader slot="loader"></lightbox-default-loader> <!-- If you want to use built-in loader -->
  <!-- <div slot="loader"></div> --> <!-- If you want to use your own loader -->
</lightbox>

Simple example with content slot

<lightbox
  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' },
  ]"
>
  <lightbox-default-loader slot="loader"></lightbox-default-loader>
  <div slot="content" slot-scope="{ url: { link, alt } }">
    <img :src="link" :alt="alt">
  </div>
</lightbox>

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

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 No loader

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

Just use it. For free. Forever.

Issues

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

About

Very simple lightbox plugin (without any dependencies) for Vuejs πŸŒ…

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Vue 69.6%
  • JavaScript 27.9%
  • HTML 2.5%