lightbox-alex-react

lightbox-alex-react

Touch friendly lightbox gallery for react

Demo Here

Features

• Navigate through the pictures with keypress (🡄 🡆)
• Exit with 'esc' key, tap/click on space around image or tap/click on "x"
• Navigate through the pictures with arrows click (◄ ►)
• Navigate through the pictures with swipe (⮨ ⮩)
• Multiple (separated) galleries in one page
• Counter (#current picture / #gallery)
• Video support (only mp4 format)

Upcoming Features

• Visual improvements

If you have any requests post an issue on github and I'll do my best

Install

npm install --save lightbox-alex-react
yarn add --save lightbox-alex-react

Usage

import React, { Component } from 'react'

import Gallery from 'lightbox-alex-react'

const pictures = ['url1', '/path/to/image.jpg']
const mixed = ['url1', '/path/to/image.jpg', 'urlVideo', '/path/to/video.mp4']


class Example extends Component {
  render () {
    return (
      <Gallery files={pictures} thumbnails={thumbnails} />
      <Gallery files={mixed} />
    )
  }
}

props = {
  files: proptypes.array,             // array of src of full res pictures / videos
  thumbnails: proptypes.array,        // (optional) array of src of thumbnails (for each picture), if not the default one is used
  tmbClasses: proptypes.string,       // (optional) classes to apply to the thumbnails
  galleryClasses: proptypes.string    // (optional) classes to apply to the gallery
}

If optional prop is not passed, default value is used

ENJOY!

License

MIT © Aleksandar Gjoreski