響應式jQuery幻燈片高度w /多個img尺寸

我有一個開發人員根據960px佈局設計製作幻燈片。現在，我正在創建一個響應式設計。我一直在很難修復幻燈片加載功能。幻燈片下方的內容將滑動，然後在您單擊下一個img時滑下。它在緩存圖像時效果很好。響應式jQuery幻燈片高度w /多個img尺寸

我已經嘗試了很多東西，但我的jQuery知識有點欠缺。有沒有人有建議？您可以通過以下鏈接assembla發現代碼和腳本： https://www.assembla.com/code/cfrepo/subversion/node/blob/trunk/index.html#image=JohnMerriam

http://jsfiddle.net/doobada/HDyyk/

我試圖設置#real_display裏高度等於預裝的形象，但我不能讓那個想通了。我還嘗試將#real_display li height設置爲等於當前圖像，然後隱藏li，然後在加載圖像後將#real_display li height設置爲auto。

JS：

$('#real_display li:visible').hide(0); 

var customURL = window.location.href; 

$('#info_box').remove(); 

$('#real_display').append('<div id="info_box"><ul id="social_buttons_box"></ul>'+ 
           '<p>'+curr_obj["img_caption"]+'&nbsp;'+ 
           '<a href="'+curr_obj["img_href"]+'">'+curr_obj["img_author"]+'</a></p></div>'); 

$('#social_buttons_box').hide(); 

setTimeout(function(){$('#social_buttons_box').fadeIn(500);}, 0); 

var curr_dom_obj_li = $('#rimg_id_'+img_num); 
var curr_dom_obj = curr_dom_obj_li.find('img'); 

if(curr_dom_obj.attr("src") == ""){ 
    curr_dom_obj.attr("src", curr_dom_obj.attr("link")); 
} 

curr_dom_obj_li.fadeIn(500);

我堅持，併到處去尋找答案。

來源

2012-10-31 doobada

與其試圖確定下一張圖片的大小並動態更改高度，您可能只是想用JQuery預加載圖像。這會給你帶來的效果是，一旦圖像加載完成後，你提到你很滿意。

用JQuery預加載圖像的原因是here。

來源

2012-10-31 21:54:02 Peter

感謝您的迴應，彼得。該腳本現在有一個預加載器...因此，它可能無法正常工作或在正確的位置預加載......？我希望它加載下一張圖片，而不是所有圖片（稍後會添加很多很多圖片）。我會繼續玩這個，謝謝！ – doobada

當然 - 取決於有多少圖像，當您將下一張圖像放在下一張圖像上時，可能會更有效。換句話說，第一次和第二次加載在一起。當你轉到第二個時候，它也會加載第三個，當你到達第三個時它加載第四個，等等。這樣你就不會有很長的加載滯後，但是總是會預先加載你的圖像。 – Peter

響應式jQuery幻燈片高度w /多個img尺寸

回答

相關問題