Fancybox 画廊无法在 laravel-inertia-react 应用程序中工作

Question

我已将 fancybox 画廊集成到我的 web 应用程序中，但是有一个问题，当我将 fancybox 放入地图中以循环图像时，画廊未激活，我只看到一张图像，无法继续前进。 这是代码：

<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>

我尝试在没有地图的情况下静态放置图像，它可以工作，但在地图中则不起作用

谢谢大家

Answer 1

Fancybox 在任何环境下都可以完美工作，您只需要编写正确的代码/标记即可。就您而言，您现在正在循环中创建

<Fancybox>

，因此它会执行您告诉它执行的操作，但可能不是您想要的。

所以，答案是 - 将

<Fancybox>

移到循环之外，像这样 -

<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>