Fancybox gallery not working in laravel-inertia-react app

Question

I have integrated the fancybox gallery into my webapp, but there is a problem, when I put the fancybox in the map, to cycle the images, the gallery is not activated, i see only one image with no possibility of moving forward. This is the code:

<div className="row">
  {photos.map((photo) =>
    <div className="col-lg-3 col-md-4 col-xs-6 thumb" key={photo.id}>
      <Fancybox
        options={{
          Carousel: { infinite: false, },
            transition: "slide",
          }}>
        <a data-fancybox="gallery" href={STORAGE_URL + photo.img_path}>
          <img src={STORAGE_URL + photo.img_path} width="300" height="200" />
        </a>
     </Fancybox>
   </div>
  )}
</div>

I tried to put the images statically without the map and it works, in the map it doesn't work

Thank u all

Answer 1

Fancybox is working perfectly fine in any environment, you just have to write correct code/markup. In your case, you are now creating <Fancybox> in a loop, therefore it does what you tell it to do, but probably not what you want.

So, the answer is - move <Fancybox> outside the loop, smth like this -

<Fancybox
        options={{
          Carousel: { infinite: false, },
            transition: "slide",
}}>
<div className="row">
  {photos.map((photo) =>
    <div className="col-lg-3 col-md-4 col-xs-6 thumb" key={photo.id}>      
        <a data-fancybox="gallery" href={STORAGE_URL + photo.img_path}>
          <img src={STORAGE_URL + photo.img_path} width="300" height="200" />
        </a>
    
   </div>
  )}
</div>
</Fancybox>