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

btw，v3没有您使用的这些选项，而afterClose使用回调代替onClosed

滑块革命和fancybox-3

1 个答案: