All Projects → silencesys → Silentbox

silencesys / Silentbox

Licence: mit
A lightbox inspired Vue.js component.

Projects that are alternatives of or similar to Silentbox

Simple image viewer component for React
Stars: ✭ 44 (-77.55%)
Mutual labels:  gallery, images, lightbox, image-viewer
Light, dependency free, responsive gallery script
Stars: ✭ 27 (-86.22%)
Mutual labels:  gallery, images, lightbox
Simple React Lightbox
A simple but functional light-box for React.
Stars: ✭ 265 (+35.2%)
Mutual labels:  images, gallery, lightbox
a modern photo / video gallery and lightbox [JS library]
Stars: ✭ 488 (+148.98%)
Mutual labels:  images, gallery, lightbox
Pure Javascript lightbox with mobile support. It can handle images, videos with autoplay, inline content and iframes
Stars: ✭ 702 (+258.16%)
Mutual labels:  image, gallery, lightbox
React Grid Gallery
Justified image gallery component for React
Stars: ✭ 571 (+191.33%)
Mutual labels:  images, gallery, lightbox
Ngx Gallery
Angular Gallery, Carousel and Lightbox
Stars: ✭ 417 (+112.76%)
Mutual labels:  image, gallery, lightbox
React Image Lightbox
React lightbox component
Stars: ✭ 956 (+387.76%)
Mutual labels:  image, component, lightbox
With Oblique explore new styles of displaying images
Stars: ✭ 633 (+222.96%)
Mutual labels:  image, images, image-viewer
React Native Image Gallery
Pure JavaScript image gallery component for iOS and Android with high-performance and native feeling in mind
Stars: ✭ 601 (+206.63%)
Mutual labels:  images, component, gallery
Web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.
Stars: ✭ 799 (+307.65%)
Mutual labels:  gallery, image-viewer, lightbox
Vue Cool Lightbox
Vue.js lightbox inspired by fancybox.
Stars: ✭ 196 (+0%)
Mutual labels:  image, images, lightbox
Swift image slideshow with circular scrolling, timer and full screen viewer
Stars: ✭ 1,612 (+722.45%)
Mutual labels:  image, gallery
V Viewer
Image viewer component for vue, supports rotation, scale, zoom and so on, based on viewer.js
Stars: ✭ 1,776 (+806.12%)
Mutual labels:  image, gallery
jQuery Zoom Gallery plugin
Stars: ✭ 120 (-38.78%)
Mutual labels:  image, gallery
A simple and customizable Android full-screen image viewer with shared image transition support, "pinch to zoom" and "swipe to dismiss" gestures
Stars: ✭ 1,734 (+784.69%)
Mutual labels:  image, gallery
React Magnifier
🔍 React image zoom component
Stars: ✭ 116 (-40.82%)
Mutual labels:  image, component
Resize images and animated GIFs in Go
Stars: ✭ 1,690 (+762.24%)
Mutual labels:  image, images
Vue Pure Lightbox
Very simple lightbox plugin (without any dependencies) for Vuejs 🌅
Stars: ✭ 142 (-27.55%)
Mutual labels:  gallery, lightbox
IPyPlot is a small python package offering fast and efficient plotting of images inside Python Notebooks. It's using IPython with HTML for faster, richer and more interactive way of displaying big numbers of images.
Stars: ✭ 152 (-22.45%)
Mutual labels:  images, image-viewer

SilentBox 2.0 a lightbox vue.js component

Github Stars Github Issues License

A second version of the lightweight lightbox inspired component for Vue.js with local video support and more features coming. If you're interested, see demo.

Supported formats and services

  • All image formats that can be displayed in browser
  • Local video files with following extensions .mp4, .ogg, .webm, .mov, .flv, .wmv, .mkv
  • YouTube and Vimeo embed videos with autoplay



npm install --save vue-silentbox

Import the plugin into Vue:

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


How to use?

Define an array of images in the data object of your Vue instance or component.

const app = new Vue({
    el: '#application',
    data: {
        images: [
                src: 'images/image001.jpg',
                srcSet: '/images/image001-640.jpg 640w,/images/image001-1280.jpg 1280w,/images/image001-1920.jpg 1920w',
                description: 'Sunken dreams II. by Arbebuk',
                src: 'images/image002.jpg',
                srcSet: '/images/image002-640.jpg 640w,/images/image002-1280.jpg 1280w,/images/image003-1920.jpg 1920w',
                description: 'Tunnel View Sunrise by Porbital',

Then in the template you use a silent-box component to display the gallery.

<silent-box :gallery="images"><!-- your additional content --></silent-box>

Or you can show a single image by just renaming the property.

<silent-box :image="images[0]"><!-- your additional content --></silent-box>

Custom activators

In case you don't like the default image previews that SilentBox provides, you can set your own activators - text, button or even a video! SilentBox provides a named slot for this - silentbox-item. The slot provides variable called silentboxItem which provides you access to all properties you set on image object.

In this example only alt text is displayed as an activator.
<silent-box :gallery="images">
    <h2 class="tw-text-3xl tw-font-bold tw-mb-2">Gallery</h2>
    <p class="tw-font-light tw-mb-3">
        Items could be merged into groups that make galleries.
    <template v-slot:silentbox-item="{ silentboxItem }">
        <p>{{ silentboxItem.alt  }}</p>

Image object attributes

You can set the following attributes to the image object to change the behaviour of the SilentBox or display additional information. On the other hand, if you're lazy, only the src attribute is required.

Attribute required type Description
src yes string media source, it could be an image, video or a YouTube / Vimeo embed link
srcSet no string srcSet to make use of responsive images
thumbnail no string image used for thumbnail
thumbnailHeight no string height of the thumbnail in px
thumbnailWidth no string width of the thumbnail in px
description no string short description below image (doesn't work below videos yet)
alt no string alt description for images
autoplay no bool to autoplay youtube / Vimeo video
controls no bool works only for youtube videos, setting false will hide video controls

Gallery element attributes

These attributes can change the gallery element behaviour.

Attribute required type Description
gallery no array list of image objects that will be displayed in the gallery
image no object image object that will be displayed in the gallery
lazy-loading no bool whether images should be lazy loaded
preview-count no number number of images that should be displayed in the gallery


SilentBox also fires several events that can be further used in your Vue.js application. Each event has a payload that contains the item object which holds information about the currently displayed item. | Event name | When is event fired | |:------| :------ | | silentbox-overlay-opened | when the overlay is opened | | silentbox-overlay-hidden | when the overlay is closed (button or ESC key) | | silentbox-overlay-next-item-displayed | when the user moves to the next picture (arrow or key) | | silentbox-overlay-previous-item-displayed | when the user moves to the previous picture (arrow or key) |

Open overlay programatically

SilentBox provides two options how to open the overlay programatically. If you need to open an existing gallery, the best option is to use the ref attribute and then call the method openOverlay on the $refs object in your method. See example:

<silent-box ref="silentbox" :gallery="images"></silent-box>

and then the method openOverlay can be called from your method:

// ...
methods: {
    // the index parameter is optional, however it should be set if you're opening
    // the overlay on different position than the beginning of the gallery
    openOverlayProgramaticallyWithContext (item, index = 0) {
        this.$refs.silentbox.openOverlay(item, index)
// ...

However, in case you just want to open an item without any context, it might be a better choice to call the global open method that SilentBox provides.

// ...
methods: {
    openOverlayProgramaticallyWithoutContext (item) {
// ...

Upgrading from 0.1?

Version 2 brought many breaking changes. There are no more two separate components to display a single image or gallery. So, change all your silentbox-group and silentbox-single components to silent-box. The source of images must be an array of objects or a single object with previously mentioned attributes.


All contributions are welcomed, however give me some time to review your requests. Please, use emoji in your commits, so it is easier to identify what your commits do. There are several emoji guides on the internet. Please stick with mine which is inspired by Atom contributing guidelines, see emoji in commits.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].