如何向 FancyBox 添加删除按钮答案

【问题标题】：How can I add a delete button to FancyBox如何向 FancyBox 添加删除按钮
【发布时间】：2018-10-11 08:39:11
【问题描述】：

当使用 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;
});

【问题讨论】：

标签： php jquery mysql

【解决方案1】：

如果有人从 Google 登陆这里，当您通过 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。

【讨论】：

【解决方案2】：

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

【讨论】：