花式框的自定义按钮

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 的标签（我在该标签上有 data-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;               
});

希望它对其他人也有帮助。

花式框的自定义按钮

Custom button for fancy box

javascript

jquery

fancybox-3