如何为Fancybox 3缩略图添加标题/提示？需复用已有图片说明

当然可以实现！Fancybox 3本身没有直接在thumbs配置项里提供标题设置，但我们可以通过回调函数或者自定义缩略图模板两种方法，轻松复用你已有的图片说明文字作为缩略图的悬停标题。下面分两种常见场景说明：

场景1：给页面上的原始缩略图加悬停标题 #

如果你的需求是鼠标悬停在页面中触发Fancybox的原始小图片上时显示标题，最简单的方式就是直接给这些图片批量添加title属性，值复用你已有的说明文字（比如data-caption）。

假设你的HTML结构是这样的：

<a data-fancybox="gallery" href="large-image-1.jpg">
  <img src="thumb-1.jpg" data-caption="这是第一张图片的说明">
</a>
<a data-fancybox="gallery" href="large-image-2.jpg">
  <img src="thumb-2.jpg" data-caption="这是第二张图片的说明">
</a>

你可以用一段简单的JS代码完成批量设置：

// 遍历所有Fancybox触发元素内的图片
$('[data-fancybox] img').each(function() {
  const caption = $(this).attr('data-caption');
  if (caption) {
    $(this).attr('title', caption);
  }
});

这样鼠标悬停原始缩略图时，就会自动显示对应的说明文字了。

场景2：给Fancybox内部的缩略图导航加悬停标题 #

如果你的需求是给Fancybox打开后侧边/底部的缩略图导航栏里的缩略图加悬停标题，我们有两种实现方式：

方法1：使用afterShow回调动态添加标题 #

在Fancybox初始化时，通过afterShow回调遍历生成的缩略图，给每个缩略图元素添加title属性：

$('[data-fancybox="gallery"]').fancybox({
  thumbs: {
    autoStart: false,
    hideOnClose: true,
    parentEl: '.fancybox-container',
    axis: 'y'
  },
  afterShow: function(instance, current) {
    // 遍历缩略图导航里的所有项
    instance.thumbs.$grid.find('.fancybox-thumb').each(function(index) {
      // 获取对应图片的说明文字
      const caption = instance.items[index].opts.caption;
      if (caption) {
        // 给缩略图的链接添加title属性（也可以给内部img标签设置）
        $(this).attr('title', caption);
      }
    });
  }
});

方法2：自定义缩略图模板 #

另一种更优雅的方式是自定义缩略图的HTML模板，直接在模板里嵌入title属性：

$('[data-fancybox="gallery"]').fancybox({
  thumbs: {
    autoStart: false,
    hideOnClose: true,
    parentEl: '.fancybox-container',
    axis: 'y',
    // 自定义模板，将图片说明作为缩略图的title属性
    template: '<a class="fancybox-thumb" href="javascript:;" title="{{opts.caption}}"><img src="{{src}}" alt="" /></a>'
  },
  // 确保说明文字被正确传递到模板（如果你的说明在alt或其他属性，可调整这里）
  beforeLoad: function(instance, current) {
    current.opts.caption = current.$trigger.find('img').attr('data-caption') || current.opts.caption;
  }
});

注意：如果你的图片说明文字不是存在data-caption里，而是alt或者其他自定义属性，只需要调整代码里获取属性的部分即可（比如把data-caption换成alt）。

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