滑塊可以全屏與花哨箱打開圖片

我嘗試使用Nivo滑塊（3.2）fancybox（2.1.4）。在這裏，我有兩個問題：滑塊可以全屏與花哨箱打開圖片

像我只能查看相同尺寸的圖像作爲滑塊上-By點擊
-Nivo滑塊圖像背景消失時的fancybox是開放

我用

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

那麼有沒有一個滑塊可以做到這一點？或者我必須寫我的自定義滑塊？滑塊應該顯示作爲Nivo滑塊的圓圈（幻燈片數量），並且應該有next/prev按鈕。另外我希望沒有自動轉換的選項。

來源

2013-04-11 grabner

這不是滑，是你初始化的fancybox的方式：你是怎麼知道的fancybox開什麼形象呢？我假設你想打開一個更大的圖像，但如果你沒有設置目標，fancybox會將可見圖像（在滑塊中）作爲內嵌內容移動到燈箱。我想你應該在滑塊中爲你的圖像設置一個'data-fancybox-href =「{big image target}」'屬性，這樣fancybox就會知道要顯示什麼。 – JFK 2013-04-11 16:17:52

我將顯示給用戶的代表主圖像。這是用戶可點擊的唯一圖像。 nivo滑塊不採用類或數據屬性... – grabner 2013-04-12 06:27:43

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

來源

2013-04-12 06:53:37 grabner

滑塊可以全屏與花哨箱打開圖片

回答

相關問題