The live demo is available here: https://codepen.io/DCzajkowski/pen/rzOErW.
npm i vue-pure-lightbox --save<!-- 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>In your index file
import Lightbox from 'vue-pure-lightbox'
Vue.use(Lightbox)<script>
Vue.use(Lightbox)
new Vue({
// ...
})
</script><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><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>| 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 |
| 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 |
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.
Just use it. For free. Forever.
If you find any bug or problem with the plugin please open an issue or create a pull request on the Github repo.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent