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

Question

我尝试将 Nivo Slider (3.2) 与 fancybox (2.1.4) 一起使用。这里我有两个问题：

- 通过单击图像，我只能查看与滑块中相同大小的图像 -
打开fancybox 时，Nivo 滑块图像在背景中消失

我用了

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

那么有没有可以做到这一点的滑块？还是我必须编写自定义滑块？滑块应将圆圈（幻灯片数量）显示为 Nivo 滑块，并且应具有下一个/上一个按钮。我还想要不发生自动转换的选项。

Answer 1

感谢肯尼迪：

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();
});