Question

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

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

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

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

Answer 1

对于标题而言：从模板中删除标题，然后在Load之后手动将其检索：

$('[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;
}

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

1 个答案: