如何在fancybox的内容下方放置标题/标题？答案

【问题标题】：how to place caption/title right below content on fancybox?如何在fancybox的内容下方放置标题/标题？
【发布时间】：2019-06-18 10:30:04
【问题描述】：

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

这里也有一些关于这个问题的问题，但似乎找到的建议不再起作用，例如使用签名title 或data-fancybox-title。

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

那么，有没有一些隐藏的方法呢？

【问题讨论】：

你需要分享你到目前为止所尝试的 - stackoverflow.com/help/minimal-reproducible-example
使用baseTpl: 选项创建您自己的模板，或使用afterShow 或beforeShow 将标题移动到内容中
@Nimrules：你真的想要/需要我写一个带有磁贴或 data-fancybox-title 的链接吗？

标签： javascript html css fancybox fancybox-3

【解决方案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;
}

【讨论】：