如何用Fancybox实现点击缩略图后同窗口展示主图及关联图

需求描述 #

我想要做一个图片画廊，主图关联着其他相关图片。希望点击缩略图后，既能查看该缩略图对应的完整尺寸主图，还能在同一个窗口里通过滚动/切换操作查看那些没在画廊里展示的关联图片。

示例效果示意图：

当前代码问题（仅支持单张图片查看） #

目前我的代码只能实现点击缩略图查看单张图片，无法展示关联图片：

<div class="col-3 thumb"> 
  <a data-fancybox="gallery" href="1.jpg" class="fancybox" data-caption="Description 1"> 
    <div class="hovereffect"> 
      <img class="img-fluid" src="1.jpg" alt=""> 
      <div class="overlay"> 
        <h2>Tittle 1</h2> 
      </div> 
    </div> 
  </a> 
</div> 
<div class="col-3 thumb"> 
  <a data-fancybox="gallery" href="2.jpg" class="fancybox" data-caption="Description 2"> 
    <div class="hovereffect"> 
      <img class="img-fluid" src="2.jpg" alt=""> 
      <div class="overlay"> 
        <h2>Tittle 2</h2> 
      </div> 
    </div> 
  </a> 
</div> 
<div class="col-3 thumb"> 
  <a data-fancybox="gallery" href="3.jpg" data-caption="Description 3"> 
    <div class="hovereffect"> 
      <img class="img-fluid" src="3.jpg" alt=""> 
      <div class="overlay"> 
        <h2>Tittle 3</h2> 
      </div> 
    </div> 
  </a> 
</div>

尝试的ID方案代码（存在语法问题） #

我尝试用ID绑定的方式实现，但代码有问题：

<a data-fancybox="gallery" href="#img_1" class="fancybox"> 
  <div style="display:none"> 
    <div id="img_1"""> 
      <div class="container"> 
        <div class="row"> 
          <div class="col-7" > 
            <a data-fancybox="gallery1" href="1.jpg" class="fancybox"> 
              <img class="img-fluid" src="1.jpg" /> 
            </a> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div>

解决方案：内联内容+分组画廊结合 #

其实可以利用Fancybox的内联内容功能，把每个缩略图对应的主图和关联图片放在一个隐藏容器里，同时给关联图片设置独立的画廊分组，这样点击缩略图打开内联容器后，就能直接切换查看所有关联图片了。

完整实现代码 #

<!-- 缩略图展示区 -->
<div class="row">
  <div class="col-3 thumb">
    <a data-fancybox="inline-galleries" href="#group-1" data-caption="标题1及关联图集">
      <div class="hovereffect">
        <img class="img-fluid" src="1-thumb.jpg" alt="缩略图1">
        <div class="overlay">
          <h2>Title 1</h2>
        </div>
      </div>
    </a>
  </div>

  <div class="col-3 thumb">
    <a data-fancybox="inline-galleries" href="#group-2" data-caption="标题2及关联图集">
      <div class="hovereffect">
        <img class="img-fluid" src="2-thumb.jpg" alt="缩略图2">
        <div class="overlay">
          <h2>Title 2</h2>
        </div>
      </div>
    </a>
  </div>
</div>

<!-- 隐藏的关联图片组容器 -->
<div style="display: none;" id="group-1">
  <div class="p-4">
    <!-- 主图+关联图组成独立画廊 -->
    <a data-fancybox="group1-imgs" href="1-main.jpg" data-caption="主图1">
      <img class="img-fluid mb-3" src="1-main.jpg" alt="主图1">
    </a>
    <a data-fancybox="group1-imgs" href="1-related-1.jpg" data-caption="关联图1-1">
      <img class="img-fluid mb-3" src="1-related-1.jpg" alt="关联图1-1">
    </a>
    <a data-fancybox="group1-imgs" href="1-related-2.jpg" data-caption="关联图1-2">
      <img class="img-fluid" src="1-related-2.jpg" alt="关联图1-2">
    </a>
  </div>
</div>

<div style="display: none;" id="group-2">
  <div class="p-4">
    <a data-fancybox="group2-imgs" href="2-main.jpg" data-caption="主图2">
      <img class="img-fluid mb-3" src="2-main.jpg" alt="主图2">
    </a>
    <a data-fancybox="group2-imgs" href="2-related-1.jpg" data-caption="关联图2-1">
      <img class="img-fluid" src="2-related-1.jpg" alt="关联图2-1">
    </a>
  </div>
</div>

代码说明 #

1. 缩略图绑定：所有缩略图用data-fancybox="inline-galleries"统一分组，点击后打开对应的隐藏内联容器（比如#group-1）
2. 关联图片分组：每个内联容器里的图片用独立的data-fancybox分组（比如group1-imgs），Fancybox会自动识别这些图片为可切换的画廊
3. 交互体验：打开内联容器后，你可以通过Fancybox自带的左右切换按钮、键盘箭头来浏览所有关联图片，也支持循环浏览
4. 修复之前的问题：你之前的代码里多了一个引号id="img_1""，这会导致HTML语法错误，现在的方案避免了这类问题

可选JS配置（优化体验） #

如果需要自定义画廊的交互行为，可以添加以下JS代码：

$('[data-fancybox="inline-galleries"]').fancybox({
  width: '80%',
  height: 'auto',
  afterShow: function() {
    // 确保内联里的画廊自动初始化
    $('[data-fancybox^="group"]').fancybox({
      loop: true, // 循环浏览
      navigation: true, // 显示导航按钮
      toolbar: true // 显示工具栏
    });
  }
});

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