Question

我正在创建一个包含不同部分（室外和餐厅）的画廊。问题在于lighbox元素如何在各部分之间分页。

这些部分的图像以适当的名称存储在目录中。

我有两个单独的GraphQL查询，分别从这些目录中提取图像，看起来像这样：

outdoors: allFile(filter: { relativeDirectory: { eq: "outdoors" } } sort: { fields: name }){
      edges {
        node {
          id
          thumb: childImageSharp {
            fluid(maxWidth: 270, maxHeight:270) {
              ...GatsbyImageSharpFluid
            }
          }
          full: childImageSharp {
            fluid(
              maxWidth: 1280
              quality: 85
              srcSetBreakpoints: [576, 768, 992, 1200]
            ) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }

restaurant: ---similar to outdoors---

我映射到这些图像，创建我的全尺寸图像和缩略图，并将它们传递给我正在使用的图库库（this来自browniebroke，尽管我希望这个问题是普遍存在的，而不是由于这个原因图书馆）。像这样：

const fullSizeOutdoors = data.outdoors.edges.map(edge => edge.node.full.fluid.src)
const thumbsOutdoors = data.outdoors.edges.map(edge => edge.node.thumb.fluid)

const fullSizeRestaurant = data.restaurant.edges.map(edge => edge.node.full.fluid.src)
const thumbsRestaurant = data.restaurant.edges.map(edge => edge.node.thumb.fluid)

<div id="outdoors">Outdoors</div>
<div>
    <Gallery images={fullSizeOutdoors} thumbs={thumbsOutdoors} />
</div>

<div id="restaurant">Restaurant</div>
<div>
    <Gallery images={fullSizeRestaurant} thumbs={thumbsRestaurant} />
</div>

这一切都很好。但是，当用户使用箭头浏览灯箱中的图像并击中Outdoors图像的末尾时，他们会跳回到Outdoors图像的开始。所需的行为是继续显示餐厅的图片

我能理解为什么会这样；我创建的第一个图库仅了解户外图像，因此无法将用户带到以下任何部分。如何设置它，使其具有相应的知识？

显而易见的答案是将所有图像放入一个查询和一个图库中。这样做可以正常工作，但随后我就放弃了使用具有单独ID的单独div的方法，该方法用于允许用户使用导航按钮在缩略图之间进行导航。

（上面的简化很大，但是我认为这是我的问题的核心。实际上，有两个以上的部分和数百个图像。）

如何使用多个GraphQL查询创建一个图库？

0 个答案: