Magnific Popup的自定义标题

Question

我正在尝试让Magnific Popup根据其使用的目标周围的其他元素显示标题.鉴于以下标记,我希望标题为"Foobar".

<div class="container">

    <article>
        <h2>Foo</h2>
        <figure>
            <a href="img/img-1.jpg">
                <img src="img/img-1.jpg" /> 
            </a>
            <figcaption>
                bar1
            </figcaption>                                   
        </figure>
    </article>

    <article>
        <h2>Foo</h2>
        <figure>
            <a href="img/img-2.jpg">
                <img src="img/img-2.jpg" /> 
            </a>
            <figcaption>
                bar2
            </figcaption>                                   
        </figure>
    </article>

</div>

我在网上寻找解决方案时尝试过的(包括StackOverflow上的这个解决方案)是以下代码:

$('.container').magnificPopup({
    delegate: 'article figure a',
    type: 'image',
    titleSrc: function(item) {
        return item.el.parent('article').find('h2').text() + item.el.parent('article').find('figcaption').text();
    },
    gallery:{enabled:true}
});

确定函数可能是一个问题,我甚至试图简单地返回一个常量字符串,但这似乎什么都不做:

titleSrc: function(item) {
    return "fake Foobar";
}

有没有人有任何线索,因为我做错了什么？

注意:如果我使用titleSrc:'title',它确实有效,但这不是我想要的行为,因为它使我不得不在标记中复制内容.

Answer 1

根据文档titleSrc:{}应该在里面image:{},你可以使用item.el.parents()而不是item.el.parent().

更正代码

$('.container').magnificPopup({
    delegate: 'article figure a',
    type: 'image',
    gallery:{enabled:true},
    image: {
        titleSrc: function(item) {
        return item.el.parents('article').find('h2').html() + item.el.parents('article').find('figcaption').html();
        }
    }
});