0

開発者に 960px のレイアウト デザインに基づいてスライドショーを作成してもらいました。現在、レスポンシブデザインを作成中です。スライドショーの読み込み機能を修正するのに非常に苦労しています。次の画像をクリックすると、スライドショーの下のコンテンツがスライドアップしてからスライドダウンします。画像がキャッシュされている場合はうまく機能します。

私は非常に多くのことを試しましたが、jQuery の知識が少し不足しています。誰か提案がありますか？次のアセンブラ リンクでコードとスクリプトを見つけることができます: https://www.assembla.com/code/cfrepo/subversion/node/blob/trunk/index.html#image=JohnMerriam

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

#real_display li の高さをプリロードされた画像と同じに設定しようとしましたが、それがわかりません。また、#real_display li の高さを現在の画像と等しくなるように設定してから、li を非表示にしてから、画像が読み込まれた後に #real_display li の高さを 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);

私は立ち往生していて、どこでも答えを探しました。

4

1 に答える 1

0

次の画像のサイズを決定して高さを動的に変更するのではなく、JQueryを使用して画像をプリロードしたい場合があります。これにより、満足のいく画像が読み込まれると、満足のいく効果が得られます。

ここでは、JQueryを使用した画像のプリロードについて説明します。

于 2012-10-31T21:54:02.553 に答える