Custom button for fancy box

Question

我想在幻灯片放映，全屏显示，关闭等旁边添加一个新按钮，并且我需要在该按钮上附加一个click事件，以便为我提供当前显示图像的src。

Answer 1

well i googled a few times but didn't find a good solution, i ended up doing this and it works!

what i needed it for was to add a delete button to my fancybox.

to add a new button:

$.fancybox.defaults.btnTpl.delete = '<button data-fancybox-delete class="fancybox-button fancybox-button--delete" title="title of the icon">put your svg icon or whatever here..</button>';

to use the newly created button:

$.fancybox.defaults.buttons = [
        'slideShow',
        'fullScreen',
        'thumbs',
        'delete', // this one is the new button
        'close'];

and to attach click event and get the tag which triggered fancybox (i have data-id on that tag so i can send an xhr request to server to delete that photo)

$('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

});

Another way to get src and element of the current photo (thanks to @Janis in the comments)

$('body').on('click', '[data-fancybox-delete]', function(e) {
      var src = $.fancybox.getInstance().current.src;
      var idx = $.fancybox.getInstance().current.opts.$orig;               
});

hope it helps somebody else as well.