Simple Lightbox Gallery Component For Vue.js – Silentbox

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

Supports images, HTML5 videos/audios, and Youtube/Vimeo videos.

How to use it:

1. Import and register the VueSilentbox plugin.

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

Vue.use(VueSilentbox)

2. Add the silent-box component to the template.

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

3. Add your own media to the gallery.

const app = new Vue({
  el: ‘#webapp’,
  data: {
  gallery: [
      {
        src: '1.jpg', // image, audio, or video
        description: 'Description',
        alt: 'Image Alt',
        thumbnail: 'thumbnail.jpg'
        thumbnailWidth: '220px',
        thumbnailheight： '100px',
        autoplay: true, // for video
        controls: true, // shows youtube controls
      },
      // more images and videos
  ]}
})

4. Available component props.

lazyLoading: {
  type: Boolean,
  default: () => {
    return true
  }
},
previewCount: {
  type: Number,
  default: null
},
gallery: {
  type: Array,
  default: () => {
    return []
  }
},
image: {
  type: Object,
  default: () => {
    return {
      src: '',
      alt: '',
      thumbnailWidth: 'auto',
      thumbnailHeight: 'auto',
      thumbnail: '',
      autoplay: false,
      controls: true,
      description: ''
    }
  }
}

Preview:

Changelog:

v2.4.5 (05/01/2021)

• (gallery): change <section> to <div>

v2.4.4 (03/22/2021)

• replace gallery divs with anchors

v2.4.0 (02/03/2021)

• Overlays can be opened programatically with global open method and via $refs
• Events now contains payload with item information

v2.3.1 (01/18/2021)

• Bugfix

v2.3.0 (12/08/2020)

• Added support for responsive images

v2.2.0 (06/25/2020)

• Added support for touch events (swipe left and right)
• New animations when displayed item is changed
• Scrollbars are once again removed when overlay is opened

v2.1.1 (06/24/2020)

• added back support for custom activators
• thumbnails maintain correct aspect ratio
• various issues with Vimeo and YouTube were fixed

Download Details:

Author: silencesys

Live Demo: http://silentbox.silencesys.com/

Download Link: https://github.com/silencesys/silentbox/archive/master.zip

Official Website: https://github.com/silencesys/silentbox

Install & Download:

npm install --save vue-silentbox