react-bigpicture

React Lightbox Component based on BigPicture.js / Video and Image Demo - CodeSandbox

npm install react-bigpicture --save

OR

yarn add react-bigpicture

Props

<BigPicture
  src={'http://lorempixel.com/800/600/sports/1'}
  caption="Sport picture"
  type="image" // "video", "youtube", "vimeo", "iframe", "audio"
  noLoader
>
    <img src="http://lorempixel.com/400/200/sports/1" />
</BigPicture>

Use Callbacks

<BigPicture
  src={'http://lorempixel.com/800/600/sports/1'}
  caption="Sport picture"
  type="image" // "video", "youtube", "vimeo", "iframe", "audio"
  noLoader
  animationStart={callbackFn}
  animationEnd={callbackFn}
  onClose={callbackFn}
  onError={callbackFn}
  onChangeImage={callbackFn}
>
    <img src="http://lorempixel.com/400/200/sports/1" />
</BigPicture>

Example

import React from 'react';
import { render } from 'react-dom';
import BigPicture from "react-bigpicture";
 
render(
    <div>
        <BigPicture
            type="image"
            caption="Example of an optional caption."
            src="http://lorempixel.com/1200/700/sports/1"
        >
            <img src="http://lorempixel.com/400/200/sports/1" />
        </BigPicture>
 
        <BigPicture
            type="video"
            src="http://www.html5videoplayer.net/videos/toystory.mp4"
        >
            <img src="http://lorempixel.com/400/200/sports/2" />
        </BigPicture>
 
        <BigPicture
            type="youtube"
            src="https://www.youtube.com/watch?v=TTAU7lLDZYU"
        >
            <img src="http://lorempixel.com/400/200/sports/3" />
        </BigPicture>
 
        <BigPicture type="vimeo" src="https://vimeo.com/119287310">
            <img src="http://lorempixel.com/400/200/sports/5" />
        </BigPicture>
    </div>,
  document.querySelector('#root')
);

BigPicture by @henrygd https://github.com/henrygd/bigpicture