SilentBox

SilentBox is a minimalist extension for Vue.js that allows to display preview images and videos in an expanded window above the existing page.

Introduction

SilentBox is LightBox like plugin for Vue.js. It was inspired by FancyBox and LightBox which were used for this kind of feature/task on websites back in 2010's. However, both these libraries relied heavily on jQuery and thus when I wanted to try modern JavaScript frameworks like Vue.js, there was no other option than to build my own extension. Since then SilentBox became quite popular and I decided to continue developing it and focus more on simple and basic tasks like image and video previews. This allowed me to keep SilentBox's code clean and independent of 3rd party libraries. All animations and scripts are SilentBox's own. Right now SilentBox has over a 1000 weekly downloads on npmjs.


SilentBox is mobile-friendlySilentBox is mobile-friendly

I developed the first version of SilentBox in late 2017 and because I did not understand work with DOM elements and how modern frameworks like Vue.js work, the implementation of SilentBox was very similar to aforementioned libraries. However, it still got good attention from other developers. Thus I decided to completely rewrite SilentBox to fix errors that I made and to add a new layer of flexibility that was not possible with the old code.


Preview of slideshow in SilentBox