Pure JS lightbox component for Vue.js

Very simple lightbox plugin without any dependencies - only Vue!

View demo Download Source

Installation

With NPM:

npm i vue-pure-lightbox --save
Bash

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

Usage

With an ES6 bundler (via NPM)

In your index file

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

With a CDN

<script>
    Vue.use(Lightbox)

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

Then in any of your components

<lightbox
    thumbnail="/path/to/thumbnail.jpg"
    :images="['/path/to/image1.jpg', '/path/to/image1.jpg']"
></lightbox>
HTML

Author

Dariusz Czajkowski

Demo

GitHub

DCzajkowski/vue-pure-lightbox

16026

Very simple lightbox plugin (without any dependencies) for Vuejs 🌅 — Read More

https://codepen.io/DCzajkowski/pen/rzOErW

Latest commit to the master branch on 10-12-2022
Download as zip