fancybox 3为缩略图添加标题

Question

我正在为我的应用程序使用fancybox 3，我想为每个缩略图添加标题，我已经为图像添加了标题。 但我想将这些标题添加为缩略图的标题，这样当我将鼠标悬停在每个缩略图上时，我都可以看到标题。 fancybox缩略图是否有任何选项可以添加标题或工具提示？

view fancybox thumbnail

我只找到了这些选项

thumbs: {
  autoStart: false,
  hideOnClose: true, 
  parentEl: '.fancybox-container',
  axis: 'y'
},

Answer 1

我认为没有合适的解决方案。我必须自己一起破解。基本上，只需在data-caption属性中添加一些HTML，然后使用CSS对其进行样式设置。您还应该能够通过JS添加标题。

  .fancybox-inner .slide-title {
    position: fixed;
    top: 11px;
    left: 50%;
    transform: translate(-50%, -0%));
  }

<a href="img.jpg" data-fancybox="gallery" data-caption="<span class='slide-title'>MY Title</span> My Caption Text">
  My fancybox init text
</a>