求助：使用Glightbox实现单缩略图对应多隐藏图片的画廊功能

你的核心问题在于隐藏图片的元素位置错误，且未通过正确方式隐藏，导致Glightbox无法正常关联或元素意外显示。以下是可行的修复方案：

关键修复步骤 #

• 将每个缩略图对应的隐藏图片元素，放入同一个swiper-slide容器内，避免swiper布局混乱，同时确保Glightbox能正确识别同画廊的关联元素。
• 添加自定义CSS类实现隐藏，Glightbox默认支持识别隐藏元素，不会影响画廊功能。
• 统一同画廊的data-gallery属性值，避免关联错误。

修正后的完整代码 #

HTML代码 #

<section class="wrapper bg-light" id="projects">
  <div class="container py-14 py-md-10">
    <div class="swiper-container grid-view mb-6" data-margin="30" data-dots="true" data-items-xl="3" data-items-md="2" data-items-xs="1">
      <div class="swiper">
        <div class="swiper-wrapper">
          <!-- 第一个项目缩略图 -->
          <div class="swiper-slide">
            <a class="item-link" data-glightbox data-gallery="project-1">
              <figure class="rounded mb-6">
                <img src="./assets/img/projects/project-1-1.jpg" srcset="./assets/img/projects/project-1-1@2x.jpg 2x" alt="项目1缩略图" />
              </figure>
            </a>
            <div class="project-details d-flex justify-content-center flex-column">
              <div class="post-header">
                <h2 class="post-title h3">
                  <a class="link-dark" data-glightbox data-gallery="project-1">Complete exterior renovation</a>
                </h2>
                <div class="post-category text-ash">Location</div>
              </div>
            </div>
            <!-- 隐藏的关联图片 -->
            <div class="glightbox-hidden" data-glightbox data-gallery="project-1" data-src="https://durninbuilding.ie/assets/img/projects/project-4-2@2x.jpg" data-title="Hidden item 1"></div>
            <div class="glightbox-hidden" data-glightbox data-gallery="project-1" data-src="https://durninbuilding.ie/assets/img/projects/project-4-3@2x.jpg" data-title="Hidden item 2"></div>
            <div class="glightbox-hidden" data-glightbox data-gallery="project-1" data-src="https://durninbuilding.ie/assets/img/projects/project-4-4@2x.jpg" data-title="Hidden item 3"></div>
          </div>

          <!-- 第二个项目缩略图 -->
          <div class="swiper-slide">
            <a class="item-link" data-glightbox data-gallery="project-2">
              <figure class="rounded mb-6">
                <img src="./assets/img/projects/project-2-1.jpg" srcset="./assets/img/projects/project-2-1@2x.jpg 2x" alt="项目2缩略图" />
              </figure>
            </a>
            <div class="project-details d-flex justify-content-center flex-column">
              <div class="post-header">
                <h2 class="post-title h3">
                  <a class="link-dark" data-glightbox data-gallery="project-2">Another Project</a>
                </h2>
                <div class="post-category text-ash">Location</div>
              </div>
            </div>
            <!-- 隐藏的关联图片 -->
            <div class="glightbox-hidden" data-glightbox data-gallery="project-2" data-src="https://durninbuilding.ie/assets/img/projects/project-2-2@2x.jpg" data-title="Hidden item 1"></div>
            <div class="glightbox-hidden" data-glightbox data-gallery="project-2" data-src="https://durninbuilding.ie/assets/img/projects/project-2-3@2x.jpg" data-title="Hidden item 2"></div>
            <div class="glightbox-hidden" data-glightbox data-gallery="project-2" data-src="https://durninbuilding.ie/assets/img/projects/project-2-4@2x.jpg" data-title="Hidden item 3"></div>
          </div>

          <!-- 第三、第四个项目缩略图按照上述结构复制修改即可 -->
        </div>
      </div>
    </div>
  </div>
</section>

CSS代码 #

.glightbox-hidden {
  display: none;
}

额外注意事项 #

• 每个独立画廊的data-gallery属性值需唯一，比如project-1对应第一个项目的所有关联元素，project-2对应第二个项目，以此类推。
• 确保所有需纳入画廊的元素都带有data-glightbox属性，否则Glightbox不会识别。
• 检查Glightbox初始化代码，保持默认配置即可（默认支持识别隐藏元素）。

内容的提问来源于stack exchange，提问作者Kelvin Farrell