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

Я использую Magnific Popup для своей галереи. Когда вы нажимаете на миниатюру, она всплывает изображение. Я пытаюсь добавить кнопку «Загрузить изображение» во всплывающее окно. У меня есть фрагмент HTML, отображаемый нормально, но href ссылки для загрузки должен быть заполнен 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 привязки?


javascript html magnific-popup
person Garrettj944    schedule 05.05.2016    source источник

Ответы (3)


arrow_upward
2
arrow_downward

Если вы проверите 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

person Gabriele Petrioli    schedule 05.05.2016
comment
*редактировать. Где именно я могу разместить его в разделе опций? - person Garrettj944; 06.05.2016
comment
Я узнал, куда поместить код обратного вызова, но он все еще не меняет a href на URL-адрес img. - person Garrettj944; 06.05.2016
comment
@Garrettj944 ваша страница где-то живет? - person Gabriele Petrioli; 06.05.2016
comment
Да, это здесь: savvysumo.com/photobank/ - person Garrettj944; 06.05.2016
comment
Вы нашли проблему? - person Garrettj944; 06.05.2016
comment
@Garrettj944 Garrettj944, вам не следует изменять файл jquery.magnific-popup.min.js (это код плагина, оставьте его нетронутым) . Вам следует изменить файл jquery.mediaBoxes.js. (И именно сюда вы должны поместить все свои великолепные всплывающие параметры, такие как разметка и обратные вызовы. Сначала вы должны отменить минимизацию файла, чтобы определить, где легче вносить изменения.) - person Gabriele Petrioli; 06.05.2016

arrow_upward
1
arrow_downward

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

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>',
person Jakub Rożek    schedule 05.05.2016
comment
Не работает. Если вы хотите посмотреть код, я могу заплатить вам - person Garrettj944; 05.05.2016
comment
Мне не нужны деньги. Я делаю это ради страсти. Не могли бы вы показать мне весь код или хотя бы часть, где находится переменная, и весь вызов всплывающего окна. - person Jakub Rożek; 05.05.2016
comment
Итак, вот файл js для всплывающего окна: pastebin.com/QcpRnjQS CTRL+F скачать, чтобы узнать, где мои HTML-фрагмент есть. - person Garrettj944; 05.05.2016
comment
Это обновленный код? Кстати, откуда должна взяться ваша переменная? Где это определено? - person Jakub Rożek; 05.05.2016

arrow_upward
0
arrow_downward

Следующая ссылка показывает вам несколько способов использования href, некоторые из которых хороши, а другие плохи. Взгляните на https://stackoverflow.com/a/11348403/886393.

в частности, ответ по имени пользователя demp.

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

person pparas    schedule 05.05.2016
comment
Я пытаюсь повторить переменную js, а не запускать функцию, когда они щелкают. Если вы готовы изучить код, я могу заплатить вам - person Garrettj944; 05.05.2016
comment
разместить код здесь. Я могу помочь вам, и сообщество тоже. Я делаю это для практики. Я не хочу получать деньги. - person pparas; 05.05.2016
comment
@Jakub изучает это, вы тоже можете, если хотите. Смотрите мой комментарий его ответ :) - person Garrettj944; 05.05.2016