A second version of the lightweight lightbox inspired component for Vue.js with local video support and more features coming. If you're interested, see demo.
- All image formats that can be displayed in browser
- Local video files with following extensions .mp4, .ogg, .webm, .mov, .flv, .wmv, .mkv
- YouTube and Viemo embed videos with autoplay
npm install --save vue-silentbox
Import the plugin into Vue:
import Vue from 'vue'
import VueSilentbox from 'vue-silentbox'
Vue.use(VueSilentbox)Define an array of images in the data object of your Vue instance or component.
const app = new Vue({
el: '#application',
data: {
images: [
{
src: 'images/image001.jpg',
description: 'Sunken dreams II. by Arbebuk',
},
{
src: 'images/image002.jpg',
description: 'Tunnel View Sunrise by Porbital',
}
]
},
})Then in the template you use a silent-box component to display the gallery.
<silent-box :gallery="images"><!-- your additional content --></silentbox-single>Or you can show a single image by just renaming the property.
<silent-box :image="images[0]"><!-- your additional content --></silentbox-single>You can set the following attributes to the image object to change the behaviour
of the SilentBox or display additional information. On the other hand, if you're
lazy, only the src attribute is required.
| Attribute | required | type | Description |
|---|---|---|---|
| src | yes | string | media source, it could be an image, video or a YouTube / Vimeo embed link |
| thumbnail | no | string | image used for thumbnail |
| thumbnailHeight | no | string | height of the thumbnail in px |
| thumbnailWidth | no | string | width of the thumbnail in px |
| description | no | string | short description below image (doesn't work below videos yet) |
| alt | no | string | alt description for images |
| autoplay | no | bool | to autoplay youtube / Vimeo video |
| controls | no | bool | works only for youtube videos, setting false will hide video controls |
SilentBox also fires several events that can be further used in your Vue.js application.
| Event name | When is event fired |
|---|---|
silentbox-overlay-opened |
when the overlay is opened |
silentbox-overlay-hidden |
when the overlay is closed (button or ESC key) |
silentbox-overlay-next-item-displayed |
when the user moves to the next picture (arrow or key) |
silentbox-overlay-previous-item-displayed |
when the user moves to the previous picture (arrow or key) |
Version 2 brought many breaking changes. There are no more two separate components
to display a single image or gallery. So, change all your silentbox-group and silentbox-single components to silent-box.
The source of images must be an array of objects or a single object with previously mentioned attributes.
All contributions are welcomed, however give me some time to review your requests. Please, use emoji in your commits, so it is easier to identify what your commits do. There are several emoji guides on the internet. Please stick with mine which is inspired by Atom contributing guidelines, see emoji in commits.