Output variable inside an 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?

score 2 · Accepted Answer · answered May 05 '16 at 20:52

2

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

answered May 05 '16 at 20:52

Gabriele Petrioli

191,379
34
261
317

*edit. Where exactly do I place it in the options section? – Garrettj944 May 05 '16 at 21:02
I found out where to put the callback code, but its still not changing the a href to the img url – Garrettj944 May 05 '16 at 21:11
@Garrettj944 is your page live somewhere ? – Gabriele Petrioli May 05 '16 at 21:39
Yes, it is here: savvysumo.com/photobank/ – Garrettj944 May 06 '16 at 04:02
Did you find the issue? – Garrettj944 May 06 '16 at 16:58
1

@Garrettj944 you should not be changing the ***jquery.magnific-popup.min.js*** file (*that is the plugin code, leave it intact*). You should alter the ***jquery.mediaBoxes.js*** file. (*and that is where you should put all you magnific popup options, like the markup and the callbacks. You should un-minify the file first for identifying where to make the changes more easily.*) – Gabriele Petrioli May 06 '16 at 18:06

score 1 · Answer 2 · answered May 05 '16 at 20:17

1

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>',

answered May 05 '16 at 20:17

Jakub Rożek

2,110
11
12

Doesn't work. If you want to look at the code I can pay you – Garrettj944 May 05 '16 at 20:37
I don't need money. I do it for passion. Could you show me the entire code or at least the piece where the variable is and the whole magnific popup invocation. – Jakub Rożek May 05 '16 at 20:39
Alright, here is the js file for the popup: http://pastebin.com/QcpRnjQS CTRL+F "download" to find where my html snippet is. – Garrettj944 May 05 '16 at 20:41
Is it the updated code? BTW, where should your variable come from? Where is it defined? – Jakub Rożek May 05 '16 at 20:49

score 0 · Answer 3 · edited May 23 '17 at 12:22

0

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

edited May 23 '17 at 12:22

Community

1
1

answered May 05 '16 at 20:21

pparas

549
4
13

I am trying to echo a js variable, not run a function when they click. If you are willing to look into the code, I can pay you – Garrettj944 May 05 '16 at 20:31
post the code here. I can help you out and so can the community. I do this for practice. I do not want to get paid. – pparas May 05 '16 at 20:39
@Jakub is looking into it, you can too if you'd like. See my comment his answer :) – Garrettj944 May 05 '16 at 20:43

Output variable inside an href - Javascript

3 Answers3