React-Image-Gallery

import PropTypes from 'prop-types'; import React, { Component } from 'react'; import Lightbox from 'react-images'; class Gallery extends Component { constructor() { super(); this.state = { lightboxIsOpen: false, currentImage: 0, }; this.closeLightbox = this.closeLightbox.bind(this); this.gotoNext = this.gotoNext.bind(this); this.gotoPrevious = this.gotoPrevious.bind(this); this.gotoImage = this.gotoImage.bind(this); this.handleClickImage = this.handleClickImage.bind(this); this.openLightbox = this.openLightbox.bind(this); } componentWillUnmount() { this.closeLightbox(); } openLightbox(index, event) { event.preventDefault(); this.setState({ currentImage: index, lightboxIsOpen: true, }); } closeLightbox() { this.setState({ currentImage: 0, lightboxIsOpen: false, }); } gotoPrevious() { this.setState({ currentImage: this.state.currentImage - 1, }); } gotoNext() { this.setState({ currentImage: this.state.currentImage + 1, }); } gotoImage(index) { this.setState({ currentImage: index, }); } handleClickImage() { if (this.state.currentImage === this.props.images.length - 1) return; this.gotoNext(); } renderGallery() { const { images } = this.props; if (!images) return; const gallery = images.filter(i => i.useForDemo).map((obj, i) => ( <div key={i} className="col-xs-6 col-md-2"> <a href={obj.src} className="thumbnail" onClick={e => this.openLightbox(i, e)}> <div className="thumb-image"> <img style={{ display: 'block' }} src={obj.thumbnail} alt={obj.caption} /> </div> </a> </div> )); return ( <div className="row" style={{ marginBottom: 40, paddingLeft: 10, paddingRight: 10 }}> {gallery} </div> ); } render() { return ( <div className="section"> {this.props.heading && <h2>{this.props.heading}</h2>} {this.props.subheading && <p>{this.props.subheading}</p>} {this.renderGallery()} <Lightbox currentImage={this.state.currentImage} images={this.props.images} isOpen={this.state.lightboxIsOpen} onClickImage={this.handleClickImage} onClickNext={this.gotoNext} onClickPrev={this.gotoPrevious} onClickThumbnail={this.gotoImage} onClose={this.closeLightbox} showThumbnails={this.props.showThumbnails} theme={this.props.theme} /> </div> ); } } Gallery.displayName = 'Gallery'; Gallery.propTypes = { heading: PropTypes.string, images: PropTypes.array, showThumbnails: PropTypes.bool, subheading: PropTypes.string, }; export default Gallery;