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 { createApp } from 'vue'
import VueSilentbox from 'vue-silentbox'
import 'vue-silentbox/dist/style.css'
createApp({
  // your app props ...
})
.use(VueSilentbox)
.mount('#root')

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

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

3. Add your own media to the gallery.

createApp({
  data: {
    images: [
      {
        src: '1.jpg',
        srcSet: '1-640.jpg 640w,1-1280.jpg 1280w,1.jpg 1920w',
        description: 'Image 1',
        thumbnail: 'thumb.jpg'
        thumbnailHeight: 300,
        thumbnailWidth: 400,
        alt: 'Image Alt',
        autoplay: true,
        controls: true,
      },
      {
        src: '2.jpg',
        srcSet: '2-640.jpg 640w,2-1280.jpg 1280w,2.jpg 1920w',
        description: 'Image 2',
      },
      // ...
      ]
  },
})

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: ''
    }
  }
}

5. Events.

• @silentbox-overlay-opened
• @silentbox-overlay-hidden
• @silentbox-overlay-next-item-displayed
• @silentbox-overlay-prev-item-displayed

Preview:

Changelog:

v3.0.4 (01/12/2023)

• Removed unnecessary folders from the published package

v3.0.3 (01/02/2023)

• Added support for non-interactive Twitch video embeds. However, thumbnails are not supported as Twitch requires an API key to get the thumbnail, so you need to set your own thumbnail via the thumbnail option.
• Fixed bug where clicking on image or video would close the overlay.
• Added support for downloading images and videos.

v3.0.0/1 (12/22/2022)

• plugin completely rewritten for Vue3 using Composition API and TypeScript
• Vue3 always transforms width and height to numbers, thus properties thumbnailWidth and thumbnailHeight should always be a number
• event fired when user navigates to previous image was renamed to silentbox-overlay-prev-item-displayed from silentbox-overlay-previous-item-displayed

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: https://silentbox.rocek.dev/

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

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

Install & Download:

npm install --save vue-silentbox