在 react-image-lightbox 中分离图像

Question

我在一些图像组中单独使用这个库时遇到问题，真正发生的是当我点击另一组图像时它总是从最后一组中获取图像列表：

const Projects = [
        {
            id: 1,
            name: 'Intercambiador Del Norte',
            images: [
                INorte,
                INorte2,
                INorte3,
                INorte4,
                INorte5
            ],
            address: {
                lat: 15.553887638630355,
                lng: -87.9969039384759
            },
        },
        {
            id: 2,
            name: 'Intercambiador De Occidente',
            images: [
                IOccidente,
                IOccidente2,
                IOccidente3,
                IOccidente4,
                IOccidente5
            ],
            address: {
                lat: 15.43197682825506,
                lng: -88.02134910151912
            },
        },
        {
            id: 3,
            name: 'Puente Peatonal IHSS',
            images: [
                IHSS,
                IHSS2,
                IHSS3,
                IHSS4,
                IHSS5
            ],
            address: {
                lat: 15.541246406040697,
                lng: -88.01537077792884
            },
        },
        {
            id: 4,
            name: 'Paso A Desnivel Col. Santa Martha',
            images: [
                StaMartha,
                StaMartha2,
                StaMartha3,
                StaMartha4,
                StaMartha5
            ],
            address: {
                lat: 15.497648696265482,
                lng: -87.98749457873993
            },
        },
        {
            id: 5,
            name: 'Puente A Desnivel 27 Calle',
            images: [
                Veintisiente,
                Veintisiente2,
                Veintisiente3,
                Veintisiente4,
                Veintisiente5
            ],
            address: {
                lat: 15.478059823233426,
                lng: -87.97416842866024
            },
        },
        {
            id: 6,
            name: 'Ampliación De Bulevar 33 Calle',
            images: [
                TreintaYTresCalle,
                TreintaYTresCalle2,
                TreintaYTresCalle3,
                TreintaYTresCalle4,
                TreintaYTresCalle5,
            ],
            address: {
                lat: 15.47188476038704,
                lng: -88.00512399419196
            },
        },
        {
            id: 7,
            name: 'Paso A Desnivel Blvd Del Este Con Salida Vieja A La Lima',
            images: [
                SdaLima,
                SdaLima2,
                SdaLima3,
                SdaLima4,
                SdaLima5
            ],
            address: {
                lat: 15.50228931099425,
                lng: -87.99440008840381
            },
        },
        {
            id: 8,
            name: 'Paso a Desnivel en la Intersección Bulevar Del Norte y Acceso A El Zapotal',
            images: [Zapotal,INorte2],
            address: {
                lat: 15.551436185695238,
                lng: -88.00215568011586
            },
        },
    ];

另一部分代码：

Projects.map(function(project, index) {
<Image onClick={() => setIsOpen(true)} loading="lazy" className="rounded-img img- 
  project shadow-three" src={project.images[0]} />
   {isOpen && (
      <Lightbox
          imageLoadErrorMessage="This image failed to load"
          imageTitle={project.name}
          mainSrc={project.images[photoIndex]}
          nextSrc={project.images[(photoIndex + 1) % project.images.length]}
          prevSrc={
          project.images[
            (photoIndex + project.images.length - 1) % project.images.length
          ]
          }
          onCloseRequest={() => setIsOpen(false)}
          onMovePrevRequest={() =>
             setPhotoIndex(
                           (photoIndex + project.images.length - 1) % project.images.length
                           )
                           }
              onMoveNextRequest={() =>
                  setPhotoIndex((photoIndex + 1) % project.images.length)
              }
        />
                                        
    )}
}

我知道这可能是逻辑问题而不是库问题

提前感谢所有抽出时间的人

Answer 1

当您调用 lightbox 时，您不会告诉它您要显示哪个图像组。这是一个如何做到这一点的例子。

你可以在我的 codesandbox

上看到它

  export default function App() {
    const [isOpen, setIsOpen] = useState(false);
    const [imagesIndex, setimagesIndex] = useState(null);
    const [photoIndex, setPhotoIndex] = useState(0);

    return (
      <>
        {Projects.map((project, index) => {
          return (
            <img
              key={project.id}
              onClick={() => {
                setIsOpen(true);
                setimagesIndex(index);
              }}
              loading="lazy"
              className="rounded-img img-project shadow-three"
              src={project.images[0]}
              alt={project.name}
            />
          );
        })}
        {isOpen && (
          <Lightbox
            imageLoadErrorMessage="This image failed to load"
            imageTitle={Projects[imagesIndex].name}
            mainSrc={Projects[imagesIndex].images[photoIndex]}
            nextSrc={
              Projects[imagesIndex].images[
                (photoIndex + 1) % Projects[imagesIndex].images.length
              ]
            }
            prevSrc={
              Projects[imagesIndex].images[
                (photoIndex + Projects[imagesIndex].images.length - 1) %
                  Projects[imagesIndex].images.length
              ]
            }
            onCloseRequest={() => {
              setIsOpen(false);
              setimagesIndex(null);
            }}
            onMovePrevRequest={() =>
              setPhotoIndex(
                (photoIndex + Projects[imagesIndex].images.length - 1) %
                  Projects[imagesIndex].images.length
              )
            }
            onMoveNextRequest={() =>
              setPhotoIndex(
                (photoIndex + 1) % Projects[imagesIndex].images.length
              )
            }
          />
        )}
      </>
    );
  }

在 react-image-lightbox 中分离图像

Separate images in react-image-lightbox

reactjs

react-image-lightbox