Question

我尝试使用Nivo Slider（3.2）和fancybox（2.1.4）。我有两个问题：

- 通过点击图像，我只能查看与滑块中相同尺寸的图像当fancybox打开时，-Nivo滑块图像在后台消失

我用过

$(".nivo-main-image").fancybox();

那么有一个滑块可以做到这一点吗？或者我是否必须编写自定义滑块？滑块应显示圆圈（幻灯片的数量）作为Nivo滑块，并应具有next / prev按钮。此外，我想要没有自动转换的选项。

Answer 1

感谢JFK：

function setFullImage(){
    var src = $(".nivo-main-image").attr('src');
    var image = $("img[src$='" + src + "']");
    var full = image.attr("data-fancybox-href");
    $(".nivo-main-image").attr("data-fancybox-href", full);
}

$(document).ready(function(){
    $('#slider').nivoSlider({
        animSpeed:500,
        pauseTime:3000,
        startSlide:0,
        directionNav:true,
        controlNav:true,
        controlNavThumbs:false,
        pauseOnHover:true,
        manualAdvance:false,
        //afterLoad: function(){$('#slider').data('nivo:vars').stop = true;},
        afterLoad: function(){setFullImage();},
        afterChange: function(){setFullImage();}
    });
    $('#slider').data('nivoslider').stop();
    $(".nivo-main-image").fancybox();
});

可以用fancybox全屏打开图片的滑块

1 个答案: