Fullscreen Lightbox Javascript Fullscreen Lightbox React Fullscreen Lightbox Vue

Vue Lightbox Documentation

Official Vue fslightbox guide!

UI

You are able to edit user interface by overriding default Fullscreen Lightbox styles. Easiest way to find classes you want to edit is to explore lightbox DOM in devtools.
To show an example let's assume you want to edit toolbar:

/* let's change order of buttons (toolbar has display: flex) */
.fslightbox-toolbar-button:nth-child(1) {
order: 2;
}

/* or hide fullscreen button at low resolution */
.fslightbox-toolbar-button:nth-child(1) {
display: none;
}

@media(min-width:576px) {
.fslightbox-toolbar-button:nth-child(1) {
display: flex;
}
}
Get connected wth us on social networks!