vue-litebox

A lightweight, zero dependency lightbox implementation for vuejs.

!vue-litebox

Out of the box vue-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.

Supports images as well as youtube and vimeo videos.

Instalation

Install via 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">

Show Litebox

``

$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

```