React-images gallery

Question

I am trying to build an image gallery with React-images(https://github.com/jossmac/react-images).

Here is my code so far.

https://codesandbox.io/s/gallant-yalow-7srs6

Here I am trying to achieve two things:

Implement the modal and the modal will open with current select image from the base gallery.
Change the "of" inside active view of total view on footer. i.e. currently its "1 of 4" so I need this like "1 / 4"

Could anyone please help me? I am kind of lost :(

Thanks in advance.

Here is the example from react-images: you can also have a look at the custom props here: https://jossmac.github.io/react-images/#/ — Muhammad Haseeb, Mar 22 '20 at 17:40
Thanks Haseeb. I have checked that already but no luck to implement "currentIndex" on modal. Could please edit my fiddle? By the way I have achieved point 2, so point can be ignored. — Max, Mar 22 '20 at 18:02
Yes, the modal should open with current image which is active on base image gallery. i.e if im on 2nd image then I click to open the modal then the modal should start from the 2nd image. At present it always opens with the 1st image. — Max, Mar 22 '20 at 18:22

score 1 · Accepted Answer · answered Mar 22 '20 at 19:02

So I was able to achieve your requirement, Working example : https://codesandbox.io/s/xenodochial-dawn-scjsv

And here is the code:

 class gall extends React.Component {
  state = { modalIsOpen: false, currentIndex: 0 };
  toggleModal = () => {
    this.setState(state => ({ modalIsOpen: !state.modalIsOpen }));
  };
  onImageChange = (index) => {
    console.log(index)
    this.setState(state => ({ currentIndex: index }));
  };

  render() {
    const { modalIsOpen } = this.state;

    const CustomModalFooter = ({ currentIndex, views }) => {
      const activeView = currentIndex + 1;
      const totalViews = views.length;

      if (!activeView || !totalViews) return null;
      return (
        <span class="react-images__footer__count css-w6xjhe css-1ycyyax">
          {activeView} / {totalViews}
        </span>
      );
    };

    return (
      <>
        <button
          type="button"
          className="btn-fullScreen"
          onClick={this.toggleModal}
        >
          Open Modal
        </button>
        <ModalGateway>
          {modalIsOpen ? (
            <Modal onClose={this.toggleModal}>
              <Carousel
                currentIndex={this.state.currentIndex}
                components={{ FooterCount: CustomModalFooter }}
                views={images}
              />
            </Modal>
          ) : null}
        </ModalGateway>

        <Carousel
        onClick={this.onImageClick}
        trackProps={{onViewChange:(index) => this.onImageChange(index)}}
          components={{ FooterCount: CustomModalFooter }}
          views={images}
        />
      </>
    );
  }
}

export default gall;

React-images gallery

1 Answers1