admin 管理员组

文章数量: 1086019

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.

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.

  • javascript
  • jquery
  • fancybox-3
Share Improve this question edited Mar 3, 2018 at 7:51 Pezhvak asked Mar 1, 2018 at 20:19 PezhvakPezhvak 10.9k7 gold badges31 silver badges44 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 9

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 ments)

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

本文标签： javascriptCustom button for fancy boxStack Overflow

版权声明：本文标题：javascript - Custom button for fancy box - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744073811a2528975.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。