react-image-video-lightbox

A React lightbox that supports videos, images and pinch zooming on images. Optimized for mobile UI with swiping, but can be used on desktop as well.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-image-video-lightbox
22223.0.02 years ago4 years agoMinified + gzip package size for react-image-video-lightbox in KB

Readme

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