dimsemenov / Magnific-Popup

Light and responsive lightbox script with focus on performance.
http://dimsemenov.com/plugins/magnific-popup/
MIT License
11.39k stars 3.49k forks source link

Adding social buttons through markup #63

Closed elkirkmo closed 11 years ago

elkirkmo commented 11 years ago

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 commented 11 years ago

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 commented 8 years ago

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

`