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.

Solution 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();
        }
    }
});

Solution 2

My designed required me to have a title & description with each Image slide hence I required a custom title in magnific popup, I tried the answer from @krizna but I was only getting the title, to debug I went into js file of the magnefic popup (jquery.magnefic-popup.js) and found the function which gets called when custom Markup is parsed it is called appropriately "_getTitle".It get an item object as parameter.I logged this item object to find it had data attribute in which our item parameter goes.

I initialised the popup using items option (3rd way to initialise in the docs) here is my custom item object

items: [
            {
                src: 'https://c6.staticflickr.com/9/8785/16698139093_3c30729f1b.jpg"',
                title: 'We buy Nike shoes',
                description:'You might ask, why PhotoSwipe doesn\'t add this code automatically via JS, reason is simple – just to save file size, in case if you need some modification of layout'
            },
            {
                src: 'https://c2.staticflickr.com/8/7662/17307905305_92ae5081bf_b.jpg"',
                title: 'You can add HTML code dynamically via JS (directly before the initialization), or have it in the page initially (like it\'s done on the demo page)',
                description:'You might ask, why PhotoSwipe doesn\'t add this code automatically via JS, reason is simple – just to save file size, in case if you need some modification of layout'
            },
            {
                src: 'https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg',
                title: 'Avoid serving big images (larger than 2000x1500px) for mobile, as they will dramatically reduce animation performanc',
                description:'You might ask, why PhotoSwipe doesn\'t add this code automatically via JS, reason is simple – just to save file size, in case if you need some modification of layout'
            }
        ],

each item has src of image, a title & a description , now my titleSrc function is

titleSrc: function(item) {
               return '<p id="gallery-image-title">' + item.data.title  +'</p>' + '<p id="gallery-image-description">' + item.data.description +'</p>';
        }

I also modified the "_getTitle" function because it only parsed title property in item object(commented the first two lines), my "_getTitle" now looks like this

_getTitle = function(item) {
    console.log(item);
    /*if(item.data && item.data.title !== undefined)
        return item.data.title;*/

    var src = mfp.st.image.titleSrc;

    if(src) {
        if($.isFunction(src)) {
            return src.call(mfp, item);
        } else if(item.el) {
            return item.el.attr(src) || '';
        }
    }
    return '';
};

Now I have control over markup & have 2 dynamic src for title property.