Items could be merged into groups that make galleries.
npm install --save vue-silentbox
import Vue from 'vue'
import VueSilentbox from ‘vue-silentbox’
Vue.use(VueSilentbox)
const app = new Vue({
el: ‘#webapp’,
data: {
gallery: [
{
src: 'images/image001.jpg',
description: 'Star Night Sky Ravine by Mark Basarab, from Unsplash.',
alt: 'Blue starry night photo.',
thumbnailWidth: '220px'
},
{
src: 'images/image002.jpg',
description: 'Corno Nero, Italy by Luca Zanon, from Unsplash.',
alt: 'Landscape photo of mountain with fog.',
thumbnailWidth: '220px'
},
{
src: 'images/image003.jpg',
description: 'Remote forest path in Gävle, Sweden by Geran de Klerk, from Unsplash.',
alt: 'Low angle photo of pine trees.',
thumbnailWidth: '220px'
},
]}
})
<silent-box :gallery="gallery"></silent-box>
These attributes can be set to the image in the gallery.
attribute | type | description |
---|---|---|
src | string | media source, it could be an image or a youtube video |
thumbnail | string | link to the image that will be used as a thumbnail |
thumbnailHeight | string | height of the thumbnail in px |
thumbnailWidth | string | width of the thumbnail in px |
description | string | short description below image (doesn't work below videos yet) |
alt | string | alt description for the image |
autoplay | bool | to autoplay youtube / Vimeo video |
controls | 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 | description |
---|---|
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) |