用fancybox全屏打开图片的滑块

overo 发布于 2019-03-09 fancybox 最后更新 2019-03-09 14:33 0 浏览

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

  • 单击图像,我只能查看与滑块相同尺寸的图像 当fancybox打开时,-Nivo滑块图像在背景中消失 我用了
    $(".nivo-main-image").fancybox();
    
    那么有没有可以做到这一点的滑块?或者我必须写我的自定义滑块?滑块应该显示作为Nivo滑块的圆圈(幻灯片数量),并且应该有next / prev按钮。另外我希望没有自动转换的选项。
已邀请:

icum

赞同来自:

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