HTML5 Picture Tag Support

Lightbox.js supports the HTML5 picture element, and in this guide, we'll be taking a look at how to display this element in the lightbox.

Import

Let's get started! First, we'll need to import the SlideshowLightbox component, plus the CSS file which provides the styling for the library:

import 'lightbox.js-react/dist/index.css'
import {SlideshowLightbox} from 'lightbox.js-react'

Creating the Metadata

Next, let's initialize the metadata that contains the relevant information and links needed to render the picture tag:

let media = [
  {"picture": {
    'image/webp': {
    srcSet: 'Image URL here',
    sizes: '100vw'
    },
    'image/jpeg': {
      srcSet: 'Image URL here',
      sizes: '100vw'
    },
    'fallback': 'Image URL here'
  }
}];

Just remember to add your image URLs to the above code for the srcSet properties, as well as the fallback property too.

Then just pass this array to the images prop in the SlideshowLightbox component.

<SlideshowLightbox images={images} lightboxIdentifier="lbox1" showThumbnails={true}>
   {images.map(item => {
       return <img src={item["picture"]['image/jpeg'].srcSet} data-lightboxjs="lbox1"  />
   })}
</SlideshowLightbox>