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

如果有人从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。

Answer 2

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

如何将删除按钮添加到FancyBox

2 个答案: