Fullscreen Lightbox Javascript Fullscreen Lightbox React Fullscreen Lightbox Vue

React Lightbox Documentation

Learn how to use React version of Fullscreen Lightbox!

In pro version there is an option to add your own buttons to toolbar. To do that you need to use customToolbarButtons (array of objects) prop.

<FsLightbox
toggler={toggler}
sources={[some sources]}
customToolbarButtons={[
{
viewBox: '0 0 96.124 96.123',
d: 'M72.089,0.02L59.624,0C45.62,0,36.57,9.285,36.57,23.656v10.907H24.037c-1.083,0-1.96,0.878-1.96,1.961v15.803 c0,1.083,0.878,1.96,1.96,1.96h12.533v39.876c0,1.083,0.877,1.96,1.96,1.96h16.352c1.083,0,1.96-0.878,1.96-1.96V54.287h14.654 c1.083,0,1.96-0.877,1.96-1.96l0.006-15.803c0-0.52-0.207-1.018-0.574-1.386c-0.367-0.368-0.867-0.575-1.387-0.575H56.842v-9.246 c0-4.444,1.059-6.7,6.848-6.7l8.397-0.003c1.082,0,1.959-0.878,1.959-1.96V1.98C74.046,0.899,73.17,0.022,72.089,0.02z',
width: '17px',
height: '17px',
title: 'Facebook',
onClick: () => console.log('Facebook button clicked!')
}
]}
/>

Every toolbar button has svg icon inside so required properties are:

By default custom buttons will be displayed at begin of toolbar. If you want to edit that write some css styles.

/* for example lets reverse order of all buttons */
.fslightbox-toolbar-button:nth-child(1) {
order: 7;
}
.fslightbox-toolbar-button:nth-child(2) {
order: 6;
}
.fslightbox-toolbar-button:nth-child(3) {
order: 5;
}
.fslightbox-toolbar-button:nth-child(4) {
order: 4;
}
.fslightbox-toolbar-button:nth-child(5) {
order: 3;
}
.fslightbox-toolbar-button:nth-child(6) {
order: 2;
}
.fslightbox-toolbar-button:nth-child(7) {
order: 1;
}
Get connected wth us on social networks!