Adding social buttons through markup

[elkirkmo]

Hi, I'd like to pull the img url and title for use with some social buttons, but everything I try just breaks the plugin. Is there a way I can add the url and title to markup: without it breaking the plugin. I'd like it to work like this:

markup: '<div class="lightbox-share-btns">
<a class="email" title="Email a friend" href="mailto:?subject=%title%&body=%title%:%url%">
<div class="share-sns em"></div></a>
<a href="http://www.facebook.com/share.php?u=%url%&title=%title%">
<div class="share-sns fb"></div></a><a href="http://twitter.com/home?status=%title%+%url%"><div class="share-sns tw"></div></a></div>'+
'<div class="mfp-figure">'+
'<div class="mfp-close"></div>'+
'<div class="mfp-img"></div>'+
'</div>'+
'</div>',

Any ideas how to pull that off?

[dimsemenov]

Hi,

Template engine isn't string-based, it's DOM-based. So you'll need to modify attributes directly. There is markupParse callback that will help you.

callbacks: {
    markupParse: function(template, values, item) {
        // Triggers each time when content of popup changes
        // console.log('Parsing:', template, values, item);

        template.find('.email').attr('href', "mailto:?subject="+values.title+"&body="+values.title+":"+item.src);

        // e.t.c.
    }
}

[acespace90]

Hi, I'm trying to do almost the same thing. I have this code for every item in the list

`

    <span class='title'>Amsterdam lights fest</span>
    <span class='subtitle'>Sottotitolo con testo molto molto ma molto lungo</span>
  </a>
  <div class="ftg-social">
    <a href="#" data-social="twitter">1<i class="fa fa-twitter"></i></a>
    <a href="#" data-social="facebook"><i class="fa fa-facebook"></i></a>
    <a href="#" data-social="pinterest"><i class="fa fa-pinterest"></i></a>
    <a href="#" data-social="mail"><i class="fa fa-envelope" aria-hidden="true"></i></a>
  </div>
</div>`

and i want to pass this content into the popup as I did for title and caption. I tried this

image: { markup: '<div class="mfp-figure blog-gallery">'+ '<div class="mfp-close"></div>'+ '<div class="mfp-social">' + $(this).find('.ftg-social').html() + '</div>'+ '<div class="mfp-img"></div>'+ '<div class="mfp-bottom-bar">'+ '<div class="mfp-title"></div>'+ '</div>'+ '</div>', },

But without good results. Can you help me?