滑块革命和fancybox-3

Question

我尝试在插件滑块革命的轮播中实现 FancyBox 3。下一个代码适用于 FancyBox 2，但对于 fancyBox 3，箭头不起作用。我想知道是否有人有解决方案。

链接：https://www.themepunch.com/faq/using-fancybox-with-slider-revolution/

在 FancyBox2 中运行良好但在 fancyBox3 中不显示箭头的代码

/* change revapi1 to whatever API name is being used for your slider */
var api = revapi1;

/* no need to edit below unless you want to change the default FancyBox settings */
api.on('revolution.slide.onloaded', function() {

    jQuery(this).find('.fancybox').each(function() {

        var $this = jQuery(this);
        if(!$this.is('a')) $this = $this.removeClass('fancybox').find('a');

        $this.addClass('fancybox').attr('rel', 'gallery').fancybox({

            /* begin FancyBox options */
            width: 'auto',            
            height: 'auto',
            autoSize: true,
            aspectRatio: true,
            fitToView: true,
            autoCenter: true,
            scrolling: 'no',
            onClosed: function() {api.revresume()}

        }).on('click', function() {api.revpause()});

    });
});

Answer 1

fancyBox v3 使用data-fancybox 属性而不是rel 进行分组。

所以，替换

.attr('rel', 'gallery')

与

.attr('data-fancybox', 'gallery')

简单演示 - https://codepen.io/anon/pen/JyYryd?editors=1010

顺便说一句，v3 没有您正在使用的这些选项，并且使用 afterClose 回调而不是 onClosed