How to show lightbox in React

Issue #653

Use https://github.com/biati-digital/glightbox

Configure css. Specify class='glightbox for html elements

1
<link rel="stylesheet" href="css/blueimp-gallery.min.css" />

Install package

1
2
npm install glightbox
import GLightbox from 'glightbox'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const lbElements = features.map((feature) => {
return {
'href': require(`../apps/${app.slug}/${feature.image}`),
'type': 'image',
'title': feature.title,
'description': feature.texts[0],
}
})

const openLb = () => {
const lightbox = GLightbox({
touchNavigation: true,
loop: true,
autoplayVideos: true,
onOpen: () => {},
beforeSlideLoad: (slide, data) => {}
});

const myGallery = GLightbox({
elements: lbElements,
autoplayVideos: false,
});
myGallery.open()
}}

Comments