如何向FancyBox添加删除按钮

Question

当使用PHP和jQuery从mySQL数据库显示图像时，如何在FancyBox中包含删除按钮？

$("[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

如果有人从谷歌到这里，这里是如何通过Javascript初始化FancyBox时实际向全屏库添加自定义按钮：

    $('[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>"
        }
    });

来自official documentation。

Answer 2

我看到你正在使用图像显示到fancybox。为什么不尝试显示隐藏的实际div。并将隐藏的div添加到您的花式框中。这是我在https://clientsnb.com/proyectos/equipamiento-integral-renault/上实现的链接尝试点击按钮PREGUNTANOS，它显示隐藏内容的表单。