SilentBox logo

Silentbox 2

A simple lightbox inspired Vue.js component.

Gallery

Items could be merged into groups that make galleries.

Installation and usage

Terminal

npm install --save vue-silentbox
                
app.js
                    
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'
        },
    ]}
})
                
index.html

<silent-box :gallery="gallery"></silent-box>
                

Image attributes

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

Events

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)