react-trilogo-images v0.6.4

React Images Extended

A simple, responsive lightbox React JS component for displaying an array of images with zooming and rotating capabilities. This is a fork of jossmac/react-images

Why this fork ?

I needed something like jossmac's react-images but with extended features like zooming and rotating, with the ability to save selelcted zoom level (scaling) and rotation angle via API, and re-apply them initially on get.

Quick start

npm install --save react-trilogo-images

or

yarn add react-trilogo-images

import React from 'react';
import Lightbox from 'react-trilogo-images';

export default class Sample extends React.Component {
  ...
  render() {
    return (
      <Lightbox
        images={[{ src: 'http://example.com/img1.jpg' }, { src: 'http://example.com/img2.jpg' }]}
        isOpen={this.state.lightboxIsOpen}
        onClickPrev={this.gotoPrevious}
        onClickNext={this.gotoNext}
        onClose={this.closeLightbox}
        rotatable={true}
        zoomable={true}
        onSave={(currentImageIndex, params) => console.log('currentImageIndex, currentImageSrc, params : ', currentImageIndex, this.props.images[currentImageIndex].src, params)}
      />
    );
  }
}

Demo & Examples

Live demo: react-images-extended.surge.sh

To build the examples locally, run:

yarn install
yarn start

Then open localhost:8000 in a browser.

Using srcSet

Example using srcSet:

<Lightbox
  images={LIGHTBOX_IMAGE_SET}
  ...
/>

const LIGHTBOX_IMAGE_SET = [
  {
    src: 'http://example.com/example/img1.jpg',
    caption: 'A forest'
    srcSet: [
      'http://example.com/example/img1_1024.jpg 1024w',
      'http://example.com/example/img1_800.jpg 800w',
      'http://example.com/example/img1_500.jpg 500w',
      'http://example.com/example/img1_320.jpg 320w',
    ],
  },
  {
    src: 'http://example.com/example/img2.jpg',
    srcSet: [
      'http://example.com/example/img2_1024.jpg 1024w',
      'http://example.com/example/img2_800.jpg 800w',
      'http://example.com/example/img2_500.jpg 500w',
      'http://example.com/example/img2_320.jpg 320w',
    ],
  }
];

Options

Images object