Possible to have both title and caption?

Trying to use your script in my current project. I make a gallery and there is need to have both titles and captions for the popup images. For example, my html code:

<div class="popup-demo">
    <a href="images/demo-01.png" title="caption text">
        <img src="images/demo-01-tb.png" alt="title text" width="200" height="100" />
    </a>
    <a href="images/demo-02.png" title="caption text">
        <img src="images/demo-02-tb.png" alt="title text" width="200" height="100" />
    </a>
    ...
</div>

The popup window should consist of the following elements: Title Image Caption

The popup template code is something like this:

image: {
    markup: '<div class="mfp-figure">'+
            '<div class="mfp-close"></div>'+
            '<div class="mfp-another-title"></div>'+
            '<div class="mfp-img"></div>'+
            '<div class="mfp-bottom-bar">'+
                '<div class="mfp-title"></div>'+
            '</div>'+
        '</div>'
    }

It’s easy to retrieve text from link title attribute, but I don’t see how to retrieve text from image alt attribute so that I could use both of them simultaneously in markup template.

Is this possible? How could I do that?

Thanks, Alex

[slaFFik]

For future searchers, I did that like this:

$('.the-menu-item-img').magnificPopup({
    type: 'image',
    image: {
        titleSrc: false,
        markup: '<div class="mfp-figure">'+
                  '<div class="mfp-close"></div>'+
                  '<div class="mfp-top-bar"></div>'+
                  '<div class="mfp-img"></div>'+
                  '<div class="mfp-bottom-bar">'+
                    '<div class="mfp-title"></div>'+
                    '<div class="mfp-counter"></div>'+
                  '</div>'+
                '</div>', // Popup HTML markup. `.mfp-img` div will be replaced with img tag, `.mfp-close` by close button
    },
    callbacks: {
        // this - is Magnific Popup object.
        change: function() {
            $(this.content)
                .find('.mfp-top-bar')
                .html(
                    '<h5>' +
                        $(this.currItem.el).attr('title') +
                    '</h5>'
                );
        }
    },
    gallery: {
        enabled: true
    }
});

Note the .mfp-top-bar in markup and logic in change event.

[shur]

Before asking the question I had studied the documentation and examples on codepen. But I didn’t find any example how to display title and caption as separate text blocks, and to have the title above the image, and the caption below the image.

I know about titleSrc, but it retrieves the text only in one text block <div class="mfp-title"></div>. I was trying to apply this code but it doesn’t solve the task.

titleSrc: function(item) {
    return '<h3>' + item.el.find('img').attr('alt') + '</h3>' + item.el.attr('title');
}