How to trigger onClick event from buttonPrev and buttonNext?

[JPVRS]

I'm getting some great use out of this package. Very helpful indeed. One question I have is just what the title says... I have some code like this:

          <Lightbox
            open={isLightBoxOpen}
            close={() => setIsLightBoxOpen(false)}
            plugins={[Zoom]}
            zoom={{ ref: zoomRef }}
            slides={[
              {
                src: displayedFullImageUrl,
                alt: displayedFullImageAltText,
              },
            ]}
            render={{
              buttonPrev: () => null,
              buttonNext: () => null,
            }}
          />

I want the buttonPrev and buttonNext to trigger onClick events so I can update the state variables being used for the slide's src and alt property.

Alternatively, I could add multiple images into the slides array, but the issue is that since the currently displayed image at the time of opening the lightbox is unknown, then the next image in the sequence is unknown also.

What would you suggest is the easiest/most straightforward way to handle this? TIA for any guidance.

[igordanchenko]

Alternatively, I could add multiple images into the slides array, but the issue is that since the currently displayed image at the time of opening the lightbox is unknown, then the next image in the sequence is unknown also.

This sounds quite unusual... When does the information about the current image become available? What about the next in the sequence? Can you describe real-life scenario for this use case?

What would you suggest is the easiest/most straightforward way to handle this?

I'd suggest prefetching images in batches of size N, and using the on.view callback to fetch the next batch. Does this work for your use case?

[JPVRS]

Thanks for replying. So I have three images of a product. We'll call them main-image, second-image, and third-image. I have an ecommerce-style image display with one big image and three thumbnails underneath (one thumbnail for each image). When the component mounts, the big image defaults to main-image. The user can click the thumbnails and the big image will update accordingly. Common UX, I'm sure you understand what I mean.

I have variables with names similar to mainImageUrl, secondImageUrl, and thirdImageUrl which are Cloudinary URLs that are constructed in code for the three images. The state of the big image is set with useState in a variable called displayedFullImageUrl. In its initial state, displayedFullImageUrl is set to equal mainImageUrl. If the user clicks a thumbnail for a different image, a click handler calls setDisplayedFullImageUrl and updates its value. That triggers a useEffect causing a re-render in which the big image now displays a differnet image (determined whatever thumbnail the user clicked).

At some point the user might decide to click the big image which opens the lightbox. We don't know what the big image is at this point. Opening the lightbox with the right image (corresponding to the current big image) is working fine like this:

          <Lightbox
            open={isLightBoxOpen}
            close={() => setIsLightBoxOpen(false)}
            plugins={[Zoom]}
            zoom={{ ref: zoomRef }}
            slides={[
              {
                src: displayedFullImageUrl,
                alt: displayedFullImageAltText,
              },
            ]}
            render={{
              buttonPrev: () => null,
              buttonNext: () => null,
            }}
          />

But I want to let the user click buttonPrev and buttonNext and look at the other images using the lightbox. The problem is that I don't know what the next image is because I don't know what the current image is. It's managed by state. So I can't just set all 3 images as slides in the order of main-image, second-image, and third-image. I need some conditional logic somewhere to say:

"If displayedFullImageUrl === mainImageUrl, then slide 1 is mainImageUrl, slide 2 is secondImageUrl, and slide 3 is thirdImageUrl. If displayedFullImageUrl === secondImageUrl, then slide 1 is secondImageUrl, slide 2 is thirdImageUrl, and slide 3 is mainImageUrl. If displayedFullImageUrl === thirdImageUrl, then slide 1 is thirdImageUrl, slide 2 is mainImageUrl, and slide 2 is secondImageUrl."

Then I thought I could have a state variable lightboxImageUrl which is updated by displayedFullImageUrl until the lightbox opens,
and also have functions that are called when buttonNext and buttonPrev are clicked which conditionally update the state of lightBoxImageUrl using logic similar to the above. Then lightBoxImageUrl would be set back to the default (equal to displayedFullImageUrl) upon lightbox close.

This is why I'm asking about how to trigger an onclick event using buttonNext and buttonPrev.

[igordanchenko]

Thank you for the detailed explanation. It sounds like you can provide all 3 images in the slides array

<Lightbox
  open={isLightBoxOpen}
  close={() => setIsLightBoxOpen(false)}
  slides={[
    { src: mainImageUrl },
    { src: secondImageUrl },
    { src: thirdImageUrl },
  ]}
  // the `index` prop determines the starting slide index when the lightbox opens
  index={startingSlideIndex}
/>

and then just tell the lightbox which slide to display when it opens:

setIsLightBoxOpen(true);
setStartingSlideIndex(...) // <-- specify the desired slide index here

[JPVRS]

Oh, that's great! I was also thinking I could have a state variable which is an array containing all the slides, and pass that array to the slides prop of the lightbox, while conditionally arranging the order of the slides in response to setDisplayedFullImage changing,. But this looks a lot cleaner.

Your help is much appreciated!