Пользовательская кнопка для модной коробки

Question

Я хочу добавить новую кнопку рядом со слайд-шоу, полноэкранным режимом, закрытием и т. Д., И мне нужно прикрепить событие нажатия на эту кнопку, чтобы оно давало мне изображение текущего показанного изображения.

Answer 1

Ну, я погуглил несколько раз, но не нашел хорошего решения, в итоге я сделал это, и это работает!

для этого мне нужно было добавить кнопку удаления в мой fancybox.

добавить новую кнопку:

$.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>';

использовать только что созданную кнопку:

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

и прикрепить событие клика и получить тег, который запустил fancybox (у меня есть идентификатор данных в этом теге, чтобы я мог отправить xhr запрос на сервер, чтобы удалить эту фотографию)

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

});

Еще один способ получить src и элемент текущей фотографии (спасибо @Janis в комментариях)

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

надеюсь, это поможет кому-то еще.