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