0

Помогите мне пожалуйста. Я новичок и мне надо создать страницу (ReactJS) где могу перелистать картинки и не должен быть в fullscreеn режиме. Я написала так:

import React, { Component } from 'react';
import Lightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css';
import  './css/Home.css';

const images = [
  "https://img2.akspic.ru/image/46291-dikaya_mestnost-ozero-pustynya-boloto-priroda-1920x1080.jpg",
  "https://s1.1zoom.ru/b5050/186/Norway_Mountains_Lake_488324_1920x1080.jpg",
  "http://wallpapers-images.ru/1920x1080/nature/wallpapers/nature-wallpapers-1920x1080-00014.jpg",
  "https://sites.google.com/site/prirodanasevseegooglgfgf/_/rsrc/1463456237313/home/priroda_gory_nebo_ozero_oblaka_81150_1920x1080.jpg",
  "http://magas.su/sites/magas.su/files/newspics/gori_dzheirah.jpg",
  "http://top-desktop.ru/files/priroda/1920x1080/156.jpg",
  "https://i.ytimg.com/vi/ORbV2NLTZw4/hqdefault.jpg"
]

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      photoIndex: 0,
      isOpen: true,
    };
  }

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

    return (
      <div>
        {isOpen && (
          <Lightbox 

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

export default Home
2
  • Так, вижу код, взятый из npmjs.com/package/react-image-lightbox и что у Вас не получилось? Commented 27 сент. 2019 в 8:27
  • Мне надо, чтоб не был fullscreen
    – Varsik
    Commented 27 сент. 2019 в 16:17

1 ответ 1

0

Lightbox рендерится как модальное окно, то есть, если посмотреть HTML разметку после рендеринга Lightbox, то мы увидим примерно следующее:

введите сюда описание изображения

Именно по этой причине мы и видим его в fullscreеn режиме. Что можно попробовать сделать, чтобы не было fullscreеn режима? Верно - применить стили, которые изменят поведение Lightbox. У компонента Lightbox есть такое проперти, как wrapperClassName:

wrapperClassName - Class name which will be applied to root element after React Modal (string).

Это имя класса, которое будет применено к корневому элементу после отображения модального окна. Для примера добавим это проперти в компонент:

<Lightbox
  ...
  wrapperClassName="lightbox_container"
  ...
/>

Создадим свой CSS класс lightbox_container со следующими стилями:

.lightbox_container {
  height: 200px;
  width: 100%;
  position: absolute;
}

После этого модалка будет не во весь экран, а высотой всего лишь в 200 пикселей, растянуто во всю ширину экрана и имеющую абсолютное позиционирование. Выглядеть будет примерно так (собирал проект на codesandbox):

введите сюда описание изображения

Теперь Lightbox находится не в fullscreеn режиме. Думаю, что этого достаточно, чтобы понимать почему Lightbox в fullscreеn режиме, и как сделать кастомный класс для отображения компонента по-своему.

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.