Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

React image lightbox features #1231

Open
pj-alvarado10 opened this issue Aug 10, 2023 · 1 comment
Open

React image lightbox features #1231

pj-alvarado10 opened this issue Aug 10, 2023 · 1 comment

Comments

@pj-alvarado10
Copy link

pj-alvarado10 commented Aug 10, 2023

Hi. I knew this library by react-image-lightbox, because it is deprecated but recommende you. I try to use react photoswipe gallery the same way to lightbox because I have already a slider with images and I only need to open the lightbox (I don't need add a gallery).

I need a solution similar to this ( get by stackoverflow ):

return (
     <div>
      <Slider {...settings}>
        { images.map(image => (
           <img src={image} onClick={ e => this.handleClickImage(e, image)}  />

        ))} 
      </Slider>

      {current &&
         <Lightbox
            mainSrc={current}
            onCloseRequest={this.handleCloseModal}
            />
      }
    </div>
   )

I supposed that how Lightbox mentioned you then you have similar feature... With Gallery-Item tags I can't avoid add the gallery and use only the lightbox feature, I don't find similar tool in your documentation. Then I have the question if you have it.

@nguyentranhau98
Copy link

nguyentranhau98 commented Dec 27, 2023

Try to wrap it with the . Works for me

return (
     <Gallery>
      <Slider {...settings}>
        { images.map(image => (
        <Item>
           {({ ref, open }) => <img ref={ref} src={image} onClick={open}  />}
       </Item>
        ))} 
      </Slider>
    </Gallery>
   )

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants