Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mattbrailsford/vue-litebox

A lightweight, zero dependency lightbox implementation for vuejs
https://github.com/mattbrailsford/vue-litebox

javascript vue vuejs vuejs2

Last synced: 1 day ago
JSON representation

A lightweight, zero dependency lightbox implementation for vuejs

Host: GitHub
URL: https://github.com/mattbrailsford/vue-litebox
Owner: mattbrailsford
License: mit
Created: 2018-08-22T17:14:06.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2018-08-24T07:17:42.000Z (over 6 years ago)
Last Synced: 2024-12-24T12:42:51.680Z (4 days ago)
Topics: javascript, vue, vuejs, vuejs2
Language: Vue
Homepage:
Size: 1.32 MB
Stars: 8
Watchers: 3
Forks: 1
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# vue-litebox
A lightweight, zero dependency lightbox implementation for vuejs.

![vue-litebox](https://github.com/mattbrailsford/vue-litebox/raw/master/assets/screenshot.png)

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

Show Litebox

````

### Options
* **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`

### Events
* **close:** Fired when the close button is clicked or `Esc` key is pressed with `closeOnEsc` enabled

### Slots
#### loading
Provide custom markup for the loading overlay
````html

````

#### close
Provide custom markup for the close button
````html
x
````

#### prev
Provide custom markup for the prev button
````html
<
````

#### next
Provide custom markup for the next button
````html
&lg;
````

#### caption
Provide custom markup for the next button
````html

{{currentItemIndex + 1}}/{{totalItems}}

````