Custom button for fancy box

Question

I want to add a new button beside slide show, fullscreen, close, etc. and i need to attach a click event to that button so it gives me the src of the image that is currently showed.

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.