0

我尝试在插件滑块革命的轮播中实现 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()});

    });
});
4

1 回答 1

0

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

所以,更换

.attr('rel', 'gallery')

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

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

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

于 2017-07-28T07:35:27.637 回答