radu.luchian radu.luchian - 3 months ago 30
HTML Question

Custom title for Magnific Popup

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

As per documentation titleSrc:{} should comes 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();
             }
       }
      });