Добавить пользовательскую кнопку в fancybox

Question

Я использую приведенный ниже код для отображения результатов моей Python программы и по щелчку просмотра их в fancybox

function myFunction(myArr){

    $("#retrieved_results").empty(); //results keep changing, so everytime there are new results delete old content
    $.each(myArr, function(key, val) {
        var img_url     = folder_name+val;
        var dt          = new Date();
        const url       = new URL(img_url,'http://127.0.0.1:5000/');
        url.search='time= '+dt.getTime();
        img_url         = url.href;
        console.log(key+" "+img_url);
        $("#retrieved_results").append('<a class="fancybox" data-title-id="'+key+'" href="'+img_url+'" data-fancybox="images" >'+'<img id="'+key+'" src="'+img_url+'" width="165" height="165" hspace=5px vspace=5px>'+'</a>');             
    });
}

Я хочу добавить в fancybox дополнительную кнопку, которая при нажатии перенаправляет пользователя на другая страница для анализа этого результирующего изображения. Поскольку fancybox и изображения динамически добавляются, я не знаю, как добавить кнопку.

Answer 1

Вы не указали расположение кнопки, поэтому я предполагаю, что вам нужно добавить пользовательскую кнопку внутри панели инструментов.

Сначала ознакомьтесь с разделом «Как создать пользовательскую кнопку на панели инструментов» в документы - https://fancyapps.com/fancybox/3/docs/#faq -3 - в основном, просто используйте параметр btnTpl.

Sencond, поскольку вы динамически создаете элементы, ознакомьтесь с разделом «Как использовать» в документации - https://fancyapps.com/fancybox/3/docs/#initialize -с- javascript - в основном, используйте параметр selector (или измените defaults).

Answer 2

Для всех, кто еще застрял, вот как я закончил делать это после ответа Яниса:

CSS file: 
.fancybox-button--openimg svg path,

JAVASCRIPT file:
    $("#retrieved_results").on("focusin", function(){

        $.fancybox.defaults.btnTpl.openimg= '<button data-fancybox-openimg class="fancybox-button fancybox-button--openimg" title="Open Image" onclick="yourFunction();">' +
        '<svg xmlns="http://www.w3.org/2000/svg" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" width="512px" height="512px">'+

        '<path d="M508.271,194.568l-149.333-128c-3.146-2.708-7.583-3.323-11.396-1.594c-3.781,1.74-6.208,5.521-6.208,9.688v74.813     c-119.188,3.313-176.688,62.312-204.021,112.031c-23.771,43.219-29.104,86.01-30.302,103.573     c-0.229,2.688-0.344,5.427-0.344,8.219v0.031c0,0,0,0.01,0,0.021v0.01c0,0.01,0,0.01,0,0.01v0.031v0.01c0,0,0,0.01,0,0.021v0.01     c0,0.01,0,0.021,0,0.021c0,0.01,0,0.01,0,0.01v0.031c0,0.01,0,0.021,0,0.031c0,0,0,0.01,0,0.031v0.01v0.021v0.01     c0,0.01,0,0.021,0,0.031l0.01,0.031c0,0,0,0,0,0.01c0,0.021,0,0.031,0,0.031c0,0.01,0,0.021,0,0.031v0.031v0.031v0.01v0.031     c0,0.01,0,0.021,0,0.031c0,0,0,0.021,0.01,0.031c0,0,0,0.01,0,0.031v0.01c0,0.01,0,0.021,0,0.031v0.031c0,0.01,0,0.021,0,0.031     c-0.01,0.031,0.021,0.042,0.01,0.042v0.031c0,0.01,0,0.021,0,0.031v0.031c0,0.021,0.01,0.042,0.01,0.042v0.031     c0,0.01,0,0.021,0,0.031v0.01v0.021v0.01l0.01,0.021v0.01c0,0.01,0,0.021,0,0.021c0,0.01,0,0.01,0,0.01v0.031v0.01     c0.01,0.01,0.01,0.01,0.01,0.021c0,0,0,0.01,0,0.021v0.01c0,0.01,0,0.01,0,0.01v0.021c0.      01,0.031,0.01,0.031,0.01,0.031     c0,0.01,0,0.021,0,0.031v0.01v0.021v0.01c0.01,0.01,0.01,0.021,0.01,0.021c0,0.021,0,0.031,0,0.031     c0.667,5.26,5.156,9.323,10.583,9.323c5.885,0,10.656-4.76,10.667-10.646v-0.01c0-0.542,0.01-1.865,0.104-3.885     c4.656-88.698,168.521-108.823,213.229-112.667v73.875c0,4.167,2.427,7.948,6.208,9.688c3.802,1.729,8.229,1.125,11.396-1.594     l149.333-128c2.365-2.021,3.729-4.979,3.729-8.094C512,199.547,510.635,196.589,508.271,194.568z M362.667,307.474v-62.146     c0-2.917-1.188-5.698-3.302-7.708c-1.979-1.906-4.625-2.958-7.365-2.958c-0.156,0-0.323,0-0.49,0.01     c-7.51,0.344-142.177,7.281-208.521,64.323c21.948-57.885,75.969-128.333,208.958-128.333H352c2.833,0,5.542-1.125,7.542-3.125     s3.125-4.708,3.125-7.542V97.849l122.281,104.812L362.667,307.474z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>'+
        '<path d="M437.333,303.047c-5.896,0-10.667,4.771-10.667,10.667v91.615c0,11.76-9.573,21.333-21.333,21.333H42.667     c-11.76,0-21.333-9.573-21.333-21.333V191.995c0-11.76,9.573-21.333,21.333-21.333h147.729c5.896,0,10.667-4.771,10.667-10.667     s-4.771-10.667-10.667-10.667H42.667C19.135,149.329,0,168.464,0,191.995v213.333c0,23.531,19.135,42.667,42.667,42.667h362.667     c23.531,0,42.667-19.135,42.667-42.667v-91.615C448,307.818,443.229,303.047,437.333,303.047z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#FFFFFF"/>'+  
//you can add svg path of the icon you want to show
        '</svg>'+'</button>';
        $("a.fancybox").fancybox({
         // fancybox API options here
         buttons : [ 'zoom','slideShow','thumbs','openimg','close']
         }); 
         }); 

});