2011-08-15 23 views
2

ボタンをクリックすると、写真のサムネイルなどを隠すコードが表示されます。あなたは、このコードは、などサムネイルの一覧が含まれている身体のHTMLコードを示しJavascript/jqueryフォトギャラリーでdivを表示/非表示

<div id="thumbnail-image"><a href="#" ><img src="images/thumbnail.jpg" alt="thumanil-  image" title="Thumbnail View for Samuel Bradley" width="40" border="0" class="btn-slide" /></a> 
</div><!--end of thumbnail image--> 

</div><!--end of header--> 

<div id="controlholder"> 
<div id="controls"></div> 
</div> 

<div id="slideshow"> 
</div> 

<div id="thumbs"> 
<ul class="thumbs noscript"> 
<li><a href="images/archive/live-tour/1_noelfielding.jpg" title="Samuel Bradley   Photography" class="thumb"><img src="images/thumbnail/LIVE-TOUR_T/1 NOEL FIEDLING_THE BIG CHILL_thumb" width="185" alt="Samuel Bradley" border="0"/></a></li> 
<li><a href="images/archive/live-tour/2_noelfielding.jpg" class="thumb"><img src="images/thumbnail/LIVE-TOUR_T/2_NOEL FIELDING, THE BIG CHILL_thumb" width="185"  alt="Samuel Bradley" border="0"/></a></li> 
<li><a href="images/archive/live-tour/3_dylanmoran.jpg" class="thumb"><img src="images/thumbnail/LIVE-TOUR_T/3_DYLAN MORAN_THE BIG CHILL_thumb" width="185" alt="Samuel Bradley" border="0"/></a></li> 
<li><a href="images/archive/live-tour/4_youmeatsix.jpg" class="thumb"><img src="images/thumbnail/LIVE-TOUR_T/4_YOU ME AT SIX, HOLD ME DOWN TOUR_thumb" width="185" alt="Samuel Bradley" border="0"/></a></li> 

$(document).ready(function(){ 

hidden = true; 
$(".btn-slide").click(function() { 
if(hidden == false) { 

    $("#slideshow").slideDown('3000, linear, callback'); 
    $("#thumbs").slideUp('3000, linear, callback'); 
    hidden = true; 
} else { 
    $("#slideshow").slideUp('3000, linear, callback'); 
    $("#thumbs").slideDown('3000, linear, callback'); 
    hidden = false; 
} 
}); 
}); 

$(document).ready(function(){ 

hidden = true; 
$(".thumb").click(function() { 
if(hidden == false) { 

    $("#slideshow").slideDown('3000, linear, callback'); 
    $("#thumbs").slideUp('3000, linear, callback'); 
    hidden = true; 
} else { 
    $("#slideshow").slideUp('3000, linear, callback'); 
    $("#thumbs").slideDown('3000, linear, callback'); 
    hidden = false; 
} 
}); 
}); 

www.samuelbradley.com私はここに作成していますサイトを見つけることができます大きな画像は#slideshow divに読み込まれ、簡単に表示され、隠されますが、親指divを隠すことはできません。 #thumbs divをdisplay:noneに設定しても、それはまだ表示されます。 基本的には、ページが読み込まれたときに大きな画像が表示され、次にサムビューがサムネイル表示の&サムネイルと同時に表示されることを望んでいません。 ご協力いただければ幸いです。私は説明し、十分な例を示してくれることを願っていますか?

ソフィ

+1

手元に問題を分析するのは難しいです。スライドショーに使用されているCSS、またはCSSファイルのローカルロケーションを教えてください。 –

+1

いくつかのコメント:これら2つの.ready()関数を1つにまとめることができます。両方の必要はありません。 コード内でこの 'コールバック'関数を参照していますが、存在しないようです。このコードをどこかからコピーしたようです。あなたはスライドアップの後に何かをする必要があるかもしれません。あなたがしていない場合、コールバック関数を持っていない、私はあなたのJavaScriptが最初のものを呼び出すときに死にそうだと確信しています。 –

+0

ありがとうございました。私は助けを求めていました。最終的には準備ができていませんでしたが、私の他の声明とは混乱していました。 –

答えて

0

私は途中で見栄えれ、サイトを見て持っていました。

`#thumbs 'divが実際に表示されているときは、ロード時とは別に動作します。

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

を `.ready()関数の1つに入れましたか?これは開始時にdivを非表示にするはずです。

+0

これはやり直しのビットで終わりに働いた。あなたの助けとフィードバックに感謝します!月の上に、私の頭を抱えている。 –