顶部的 Fancybox 3.0 标题

Question

我使用的是 fancybox 3.0 Beta 1，但标题有问题。我希望标题在顶部而不是底部。

$(".fancybox").fancybox({
    helpers : {
        title: {
            type: 'inside',
            position: 'top'
        }
    }
});

我用过这个http://jsfiddle.net/JYzqR/，但它不起作用，因为它适用于fancybox 2.0（我认为它也适用于3.0，但它不会）。

你能帮我把标题移到顶部而不是底部吗？

谢谢！

Answer 1

Fancybox 3 中的“标题”称为“标题”。您可以将其作为 data-caption 属性传递给 HTML 元素：

<a href="image.jpg" data-fancybox data-caption="My caption">
    <img src="thumbnail.jpg" alt="" />
</a>

或作为 JS Api 的选项：

$.fancybox.open([
    {
        src  : 'image.jpg',
        opts : {
            caption : 'My caption',
            thumb   : 'thumbnail.jpg'
        }
    }
]);

似乎不再支持“标题”选项（例如，写在内容上方的文本）。根据开发人员的说法，它将look "outdated"。

根据文档，您应该能够通过覆盖 fancybox css 规则来“completely change the look”您的模态框。但是，这似乎并不可行，因为用于为标题创建空间的padding-bottom 似乎是set by the JS core。