如何在fancybox上的内容正下方放置标题/标题？

Question

当前的 Fancybox 版本将标题放在窗口底部，而不是图像底部的正下方。 我也在尝试询问开发人员，但我想我不会得到快速答复。

这里也有一些关于这个问题的问题，但似乎找到的建议不再有效，例如通过 ussign title或data-fancybox-title 。

我也尝试修改模板（有一个实例选项），但它不起作用。

那么，是否有一些隐藏的方法来做到这一点？

Answer 1

对于标题的事情：从模板中删除标题，然后在加载后手动检索它：

$('[data-fancybox]').fancybox({
  baseTpl:
    '<div class="fancybox-container" role="dialog" tabindex="-1">' +
    '<div class="fancybox-bg"></div>' +
    '<div class="fancybox-inner">' +
    '<div class="fancybox-infobar"><span data-fancybox-index></span>&nbsp;/&nbsp;<span data-fancybox-count></span></div>' +
    '<div class="fancybox-toolbar">{{buttons}}</div>' +
    '<div class="fancybox-navigation">{{arrows}}</div>' +
    '<div class="fancybox-stage"></div>' +
    '</div>' +
    '</div>'

  ,afterLoad : function(fb, item){
    item.$content.remove('.fb-caption').append('<div class="fb-caption">' + $(item.$thumb.context).data('caption') + '</div>');
  }
}

CSS：

.fb-caption{
  position: absolute;
  left: 0;
  right: 0;
  bottom: -30px;
  z-index: 99996;
  pointer-events: none;
  text-align: center;
  transition: opacity 200ms;
  background: none;
}