Лайтбокс на массив изображений - PullRequest
Новая
       9

Лайтбокс на массив изображений

0 голосов
/ 26 октября 2018

Я пытаюсь создать галерею изображений, сохраненных в локальной папке, и поэтому отображаю их, используя array.map. Это работает отлично. Но я застрял при вводе лайтбокса на этих изображениях. Я использую пакет lightbox-react и внес некоторые изменения, но он не работает.

Вот моя попытка: 

import React, { Component } from 'react';
import { Grid, Row, Col } from 'react-bootstrap';
import Lightbox from 'lightbox-react';
import AddPhoto from './addPhoto';

//lazy-loading images
import ObserverWrapper from '@emarketeross/simple-react-intersection-observer';

class ArchitectureGallery extends Component {
    constructor(props) {
        super(props);

        this.state = {
            isOpen: false,
            photoIndex: 0
        }
    }

    render() {
        const { photoIndex, isOpen } = this.state;

        //map through all images in folder
        let names = ['1','2','3','4','5','6', ].map( (name, index) => {
            return <img
                key={index}
                className="img-responsive"
                alt=""
                src={require(`../../assets/images/architecture/${name}.jpeg`)}
                onClick={() => this.setState({ isOpen: true})}
                />
        } );
        return (
            <div className="img-container">
                <Grid className="container">
                    <ObserverWrapper>
                    <Row>
                        <Col className="col-xs-12 col-sm-6 col-md-6 col-lg-6">
                            { names }

                            {isOpen && (
                              <Lightbox
                                mainSrc={{names}[photoIndex]}
                                nextSrc={{names}[(photoIndex + 1)] % names.length}
                                prevSrc={{names}[(photoIndex + names.length - 1) % names.length]}
                                onCloseRequest={() => this.setState({ isOpen: false })}
                                onMovePrevRequest={() =>
                                    this.setState({
                                        photoIndex: (photoIndex + names.length - 1) % names.length
                                    })
                                }
                                onMoveNextRequest={() =>
                                    this.setState({
                                        photoIndex: (photoIndex + 1) % names.length
                                    })
                                }
                                />
                            )}
                        </Col>
                    </Row>
                    </ObserverWrapper>
                </Grid>
            </div>
        );
    }
}

export default ArchitectureGallery;

Я предполагаю, что проблема в определении свойств лайтбокса, консоль отображает Failed prop type: The prop mainSrc is marked as required in ReactImageLightbox, but its value is undefined.

Любая помощь будет оценена.

1 Ответ

0 голосов
/ 26 октября 2018

Причина, по которой это не работает для вас, потому что вы используете две фигурные скобки {{}} вместо одного типа {}

Попробуйте изменить ниже

Изменить 

<Lightbox
                                mainSrc={{names}[photoIndex]}
                                nextSrc={{names}[(photoIndex + 1)] % names.length}
                                prevSrc={{names}[(photoIndex + names.length - 1) % names.length]}
                                onCloseRequest={() => this.setState({ isOpen: false })}
                                onMovePrevRequest={() =>
                                    this.setState({
                                        photoIndex: (photoIndex + names.length - 1) % names.length
                                    })
                                }
                                onMoveNextRequest={() =>
                                    this.setState({
                                        photoIndex: (photoIndex + 1) % names.length
                                    })
                                }
                                />

до 

<Lightbox
                                mainSrc={names[photoIndex]}
                                nextSrc={names[(photoIndex + 1)] % names.length}
                                prevSrc={names[(photoIndex + names.length - 1) % names.length]}
                                onCloseRequest={() => this.setState({ isOpen: false })}
                                onMovePrevRequest={() =>
                                    this.setState({
                                        photoIndex: (photoIndex + names.length - 1) % names.length
                                    })
                                }
                                onMoveNextRequest={() =>
                                    this.setState({
                                        photoIndex: (photoIndex + 1) % names.length
                                    })
                                }
                                />
...