How to show lightbox in React

[onmyway133]

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

Configure css. Specify class='glightbox for html elements

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

Install package

npm install glightbox
import GLightbox from 'glightbox'

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()
}}

[doe-base]

Very nice, thank you