Add a custom button to fancybox

Question

I am using the code below to display the results of my Python programme and on click view them in 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>');             
    });
}

I want to add an additional button in fancybox that when clicked redirects user to another page for analysis of that result image. Since the fancybox and images are being dynamically appended, I do not know how to add the button.

Answer 1

You did not specify the location of the button, therefore I will assume that you what to add custom button inside the toolbar.

First, check out "How to create custom button in the toolbar" section in the docs - https://fancyapps.com/fancybox/3/docs/#faq-3 - basically, just use btnTpl option.

Sencond, since you are dynamically creating elements, check out "How to Use" section on the docs - https://fancyapps.com/fancybox/3/docs/#initialize-with-javascript - basically, use selector option (or modify defaults ).

Answer 2

For anyone else still stuck, this is how I ended up doing it after following Janis's answer:

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']
         }); 
         }); 

});