Skip to content
master
Switch branches/tags
Code

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
May 9, 2021
May 9, 2021
May 9, 2021
Jun 28, 2018
May 24, 2021
May 9, 2021
May 24, 2021

React image & video lightbox

View demo

Installation

npm install react-image-video-lightbox

Usage

<ReactImageVideoLightbox
  data={[
    {
      url: "https://placekitten.com/450/300",
      type: "photo",
      altTag: "some image",
    },
    {
      url: "https://www.youtube.com/embed/ScMzIvxBSi4",
      type: "video",
      title: "some video",
    },
    {
      url: "https://placekitten.com/550/500",
      type: "photo",
      altTag: "some other image",
    },
    {
      url: "https://www.youtube.com/embed/ScMzIvxBSi4",
      type: "video",
      title: "some other video",
    },
  ]}
  startIndex={0}
  showResourceCount={true}
  onCloseCallback={this.callbackFunction}
  onNavigationCallback={(currentIndex) =>
    console.log(`Current index: ${currentIndex}`)
  }
/>

Properties

Property Type Description
data Array of resources An array of resource objects (see resource object below)
startIndex number Index of image/video where the lightbox should open
showResourceCount boolean Show resource count in the upper left corner
onCloseCallback Function => void Callback function called when the lightbox is closed
onNavigationCallback Function(currentIndex) => void Callback function called on navigation between resources

Resource Object

Property Type Description
url string Url of the image/video
type string Two types are supported - 'photo' & 'video' (only YouTube videos are supported)
altTag string Alt tag for image
title string Title for iframe when rendering YouTube video

Have a feature request or suggestion?

Create an issue on Github: https://github.com/Ngineer101/react-image-video-lightbox/issues