How can I add a delete button to FancyBox - php

Question

How can I include a delete button in FancyBox when displaying images from a mySQL database using PHP and jQuery?
$("[data-fancybox]").fancybox();
$.fancybox.defaults.buttons = [
'slideShow',
'fullScreen',
'thumbs',
'delete', // this one is the new button
'close'
];
$('body').on('click', '[data-fancybox-delete]', function(e) {
var src = $('.fancybox-slide--current .fancybox-image').attr('src'); // src of the currently showing slide
var idx = $('a[href="' + src + '"]')[0]; // My Tag
});
$('body').on('click', '[data-fancybox-delete]', function(e) {
var src = $.fancybox.getInstance().current.src;
var idx = $.fancybox.getInstance().current.opts.$orig;
});

Answer 1

If anyone lands here from Google, here's how to actually add a custom button to the fullscreen gallery, when you initialize FancyBox via Javascript :
$('[data-fancybox="gallery"]').fancybox({
buttons: [
"zoom",
"slideShow",
"thumbs",
"close",
"delete" //this is the name of my custom button
],
btnTpl: {
//and this is where I defined it
delete:
'<a download data-fancybox-delete class="fancybox-button fancybox-button--delete" title="Delete" href="#">' +
'<i class="fas fa-trash-alt"></i>' +
"</a>"
}
});
From the official documentation.

Answer 2

I see that you are using image to be shown to fancybox. why dont you try showing an actual div that is hidden. and adding the hidden div to your fancy box. here's a link I've implemented on https://clientsnb.com/proyectos/equipamiento-integral-renault/ try clicking on the button PREGUNTANOS and it shows a form from a hidden content.