A lightweight, zero dependency lightbox implementation for vuejs
npm install vue-liteboxvue-litebox is pretty ugly looking, but this is because it ships with the absolute minimum CSS in order to provide the lightbox functionality. The making it look pretty is left to the implementor as I find that one size doesn't always fit all.
npm
bash
npm install vue-litebox --save
``
or include via a script tag for browser based projects
``html
``
Usage
NB If included via a script tag, the component will be regisered globally so the following import and components declarations in the example below won't be necesary.
``javascript
import VueLitebox from 'vue-litebox'
var app = new Vue({
el: '#app',
components: { VueLitebox },
data: {
images: [
'/images/01.png',
'/images/02.png',
{
title: 'My image title',
src: '/images/03.png'
}
],
showLitebox: false
},
methods: {
showLitebox() {
this.showLitebox = true;
},
hideLitebox() {
this.showLitebox = false;
}
}
})
``
``html
:items="images"
@close="hideLitebox">
``
$3
* items: Array of url strings and/or objects with a src property
* startAt: The index at which to start the lightbox
* closeCaption: The caption to display on the close button. Defaults to 'Close'
* prevCaption: The caption to display on the prev arrow button. Defaults to 'Previous'
* nextCaption: The caption to display on the next arrow button. Defaults to 'Next'
* loadingCaption: The caption to display whilst loading a media item. Defaults to 'Loading...'
* videoRegex: The regex to match for video URLs which will displayed in a 16:9 ration iframe. Defaults to /youtube.com|vimeo.com/
* closeOnEsc: Define whether to close the lightbox on Esc key press. Defaults to true
* nextOnImageClick: Define whether clicking an image moves you to the next image. Defaults to true
$3
* close: Fired when the close button is clicked or Esc key is pressed with closeOnEsc enabled
$3
#### loading
Provide custom markup for the loading overlay
``html
Loading...
``
#### close
Provide custom markup for the close button
``html
slot="close" slot-scope="{ closeProps, closeEvents }"
v-bind="closeProps" v-on="closeEvents">x
``
#### prev
Provide custom markup for the prev button
``html
slot="prev" slot-scope="{ prevProps, prevEvents }"
v-bind="prevProps" v-on="prevEvents"><
``
#### next
Provide custom markup for the next button
``html
slot="next" slot-scope="{ nextProps, nextEvents }"
v-bind="nextProps" v-on="nextEvents">≶
``
#### caption
Provide custom markup for the next button
``html
v-bind="captionProps">
{{currentItem.title}}
{{currentItemIndex + 1}}/{{totalItems}}
```