href内的输出变量-Javascript

Question

I am using Magnific Popup for my gallery. When you click on a thumbnail, it popups the image. I am trying to add a "Download image" button inside the popup. I have the HTML snippet displaying fine, but the href of the download link needs to be populated with the img url.

Here is the JS code:

markup: '<div class="mfp-figure">'+
                '<div class="mfp-close"></div>'+
                '<div class="download-img"><a href="#">Download image</a></div>'+
                '<figure>'+
                    '<div class="mfp-img"></div>'+
                    '<figcaption>'+
                        '<div class="mfp-bottom-bar">'+
                            '<div class="mfp-title"></div>'+
                            '<div class="mfp-counter"></div>'+
                        '</div>'+
                    '</figcaption>'+
                '</figure>'+
            '</div>',

How do I put the image src variable in the anchor's href?

Answer 1

If you check the Magnific Popup API you will see that it provides a callback for the event markupParse

So add this to your Magnific Popup options

callbacks: {
      markupParse: function(template, values, item) {
       template.find('.download-img a').prop('href',item.src);
      }
    }

Full demo at http://codepen.io/gpetrioli/pen/reoqQv

Answer 2

Just put the variable out of quotes.

markup: '<div class="mfp-figure">'+
                '<div class="mfp-close"></div>'+
                '<div class="download-img"><a href="' + yourVar + '">Download image</a></div>'+
                '<figure>'+
                    '<div class="mfp-img"></div>'+
                    '<figcaption>'+
                        '<div class="mfp-bottom-bar">'+
                            '<div class="mfp-title"></div>'+
                            '<div class="mfp-counter"></div>'+
                        '</div>'+
                    '</figcaption>'+
                '</figure>'+
            '</div>',

Answer 3

The following link shows you a number of ways you can use href some are good and others are bad. Have a look at https://stackoverflow.com/a/11348403/886393

specifically the answer by username demp.

Thanks, Paras