花式框的自定义按钮

Question

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

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的标签（我在该标签上有数据ID，因此我可以向服务器发送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;               
});

希望它也能帮助其他人。