Custom title for Magnific Popup

Question

I'm trying to get Magnific Popup to display a title based on other elements around the target it uses. Given the following markup, I want the title to be "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>

What I've tried while looking for solutions online (including this one on StackOverflow) is the following code:

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

Figuring the function might have been an issue I've even tried to simply return a constant string, but that seemed to do nothing:

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

Does anyone have any clues as what I'm doing wrong?

NOTE: It does work if I use titleSrc: 'title', but that's not the behavior I want, as it makes me have to duplicate content in the markup.

Answer 1

As per documentation titleSrc:{} should be inside image:{} and you can use item.el.parents() instead of item.el.parent().

Corrected Code

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