Question

我想在幻灯片放映，全屏，关闭等旁边添加一个新按钮。我需要将click事件附加到该按钮，以便它为我提供当前显示的图像的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'];

并附加click事件并获取触发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;               
});

希望它也可以帮助其他人。

花式盒子的自定义按钮

1 个答案: