Выходная переменная внутри href - Javascript

Question

Я использую Magnific Popup для моей галереи. Когда вы нажимаете на миниатюру, появляется всплывающее изображение. Я пытаюсь добавить кнопку "Загрузить изображение" во всплывающем окне. У меня HTML-фрагмент отображается нормально, но ссылка на скачивание должна быть заполнена URL-адресом img.

Вот код JS:

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

Как поместить переменную src для изображения в href якоря?

Answer 1

Если вы проверите Magnific Popup API, вы увидите, что он обеспечивает обратный вызов для события markupParse

Так что добавьте это к вашим опциям Magnific Popup

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

Полная демонстрация на http://codepen.io/gpetrioli/pen/reoqQv

Answer 2

Просто поместите переменную из кавычек.

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

Следующая ссылка показывает вам несколько способов использования, если некоторые из них хороши, а другие плохи. Посмотрите на /questions/31127148/funktsiya-javascript-v-href-vs-onclick/31127179#31127179

конкретно ответ по имени пользователя демп.

Спасибо, Парас