Fancybox 3.5.x点击图片后缩略图隐藏问题求助

问题原因
Fancybox 3.x的设计逻辑默认适配<a>触发元素，当直接给<img>绑定Fancybox时，它会误将该图片判定为需要隐藏的触发元素，打开弹窗时自动添加display:none样式，且关闭弹窗后不会自动恢复原有显示状态。

解决方案

• 方案1：采用官方推荐的<a>包裹结构（最稳妥）
  这是Fancybox官方建议的标准用法，能从根源避免这类兼容性问题：

<div class="galwrapsss">
  <a href="testssssk.jpg" data-fancybox="gallery">
    <img src="testssssk.jpg" />
  </a>
  <a href="testsssskq.jpg" data-fancybox="gallery">
    <img src="testsssskq.jpg" />
  </a>
</div>

对应的JS代码可简化为：

$('[data-fancybox="gallery"]').fancybox();

• 方案2：不修改HTML，通过回调手动恢复图片显示
  如果不想调整现有HTML结构，可以在Fancybox的关闭回调中强制恢复被点击图片的显示状态：

$(".galwrapsss img").each(function(){
  const $img = $(this);
  // 记录图片初始显示状态
  const originalDisplay = $img.css('display');
  
  $img.fancybox({
    href : $img.attr('src'),
    afterClose : function() {
      // 还原图片初始显示状态
      $img.css('display', originalDisplay);
    }
  });
});

• 方案3：用CSS强制覆盖隐藏样式
  直接通过CSS规则阻止Fancybox对触发图片添加隐藏样式，无需修改JS代码：

.fancybox-hidden {
  display: inline-block !important; /* 根据你的图片布局调整值，比如block/inline等 */
}

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