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.

Supported formats and services

• All image formats that can be displayed in browser
• Local video files with following extensions .mp4, .ogg, .webm, .mov, .flv, .wmv, .mkv
• YouTube and Vimeo embed videos with autoplay

Installation

Npm

npm install --save vue-silentbox

Import the plugin into Vue: ```js import Vue from 'vue' import VueSilentbox from 'vue-silentbox'

Vue.use(VueSilentbox) ```

How to use?

Define an array of images in the data object of your Vue instance or component.

js
const app = new Vue({
    el: '#application',
    data: {
        images: [
            {
                src: 'images/image001.jpg',
                srcSet: '/images/image001-640.jpg 640w,/images/image001-1280.jpg 1280w,/images/image001-1920.jpg 1920w',
                description: 'Sunken dreams II. by Arbebuk',
            },
            {
                src: 'images/image002.jpg',
                srcSet: '/images/image002-640.jpg 640w,/images/image002-1280.jpg 1280w,/images/image003-1920.jpg 1920w',
                description: 'Tunnel View Sunrise by Porbital',
            }
        ]
    },
})

Then in the template you use a

silent-box

Or you can show a single image by just renaming the property.

vue

Custom activators

In case you don't like the default image previews that SilentBox provides, you can set your own activators - text, button or even a video! SilentBox provides a named slot for this -

silentbox-item

silentboxItem

    
Gallery
    

        Items could be merged into groups that make galleries.
    
    

Image object attributes

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 | required | type | Description | |:------| :------: | :------: |:------| | src | yes | string | media source, it could be an image, video or a YouTube / Vimeo embed link | | srcSet | no | string | srcSet to make use of responsive images | | 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 |

Gallery element attributes

These attributes can change the gallery element behaviour.

| Attribute | required | type | Description | |:------| :------: | :------: |:------| | gallery | no | array | list of image objects that will be displayed in the gallery | | image | no | object | image object that will be displayed in the gallery | | lazy-loading | no | bool | whether images should be lazy loaded | | preview-count | no | number | number of images that should be displayed in the gallery |

Events

SilentBox also fires several events that can be further used in your Vue.js application. Each event has a payload that contains the

item

silentbox-overlay-opened

silentbox-overlay-hidden

silentbox-overlay-next-item-displayed

silentbox-overlay-previous-item-displayed

Open overlay programatically

SilentBox provides two options how to open the overlay programatically. If you need to open an existing gallery, the best option is to use the

ref

openOverlay

$refs

html

openOverlay

javascript
// ...
methods: {
    // the index parameter is optional, however it should be set if you're opening
    // the overlay on different position than the beginning of the gallery
    openOverlayProgramaticallyWithContext (item, index = 0) {
        this.$refs.silentbox.openOverlay(item, index)
    }
}
// ...

However, in case you just want to open an item without any context, it might be a better choice to call the global

open

javascript
// ...
methods: {
    openOverlayProgramaticallyWithoutContext (item) {
        this.$silentbox.open(item)
    }
}
// ...

Upgrading from 0.1?

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

silentbox-single

silent-box

Contributions

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.