Simple Lightbox Gallery Component For Vue.js – Silentbox

Simple Lightbox Gallery Component For Vue.js – Silentbox

Silentbox is a simple lightbox inspired gallery component for your vue.js applications.

Silentbox

A simple lightbox inspired component for Vue.js. If you're interested, you can visit demo site.

Installation

Npm

npm install --save vue-silentbox

Import the plugin into Vue:

import Vue from 'vue'
import VueSilentbox from 'vue-silentbox'

Vue.use(VueSilentbox)

Usage

In the template you can use "single" silentbox instance

<silentbox-single src="" autoplay="true" description="">Single item</silentbox-single>

or group instance which will make gallery.

<silentbox-group>
    <silentbox-item src="" autoplay="true" description="My very custom message">Item one</silentbox-item>
    <silentbox-item src="">Item two</silentbox-item>
    <silentbox-item src="">Item three</silentbox-item>
</silentbox-group>

As you can see, both of the variants share some attributes which could be filled.

Attribute Description
src media source, it could be an image or a youtube video
description short description below image (doesn't work below videos yet)
autoplay bool, to autoplay youtube video

Github Repository

Tags: #VueJs