滑块旋转和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