2011-01-04 6 views
0

あまりにも長く読まれました。
これは私のギャラリースクリプトの中核です。これはもっと複雑に見えますが、それは本当に..ですが、私のJQuery(Javascript)知識不足のため、私自身でプログラムできませんでした。ほとんどのjavascriptはpseudoなので、pseudo javascriptを実際に有効なjavascript(Jquery)に変換できればいいです。JQuery - ギャラリーのための特別なヘルプ(大きなクエスト)

大きな画像を表示するギャラリーがあります。私は、ユーザーがGallery Images間を移動するためにクリックできるサムイメージを含むサムネイルリストを持っています。私は情報プールを持っています。そのギャラリーのすべての大きな画像を含むリスト。ギャラリーはこの情報プールから情報を取得します。 - 私はいくつかのアニメーションの問題の間、目に見えないプールを使用します。

例えばHTML

<div id="gallery"> 
<ul> 
<li>Item 1</li> <--! Item 1 is the standard item that is shown on the page--> 
</ul> 
</div> 

<div id="thumbs"> 
<ul> 
<li>Thumb 1</li> <--! This list contains thumbnails for the gallery--> 
<li>Thumb 2</li> 
<li>Thumb 3</li> 
<li>Thumb 4</li> 
</ul> 
</div> 

<div style="display:hidden;" id="pool"> <-- its invisible for the human eyes --> 
<ul> <--! This list is the information pool which stores the big pictures of the gallery--> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
<li>Item 4</li> 
</ul> 
</div> 

疑似(jQueryの)Javascriptを

$('#thumbs ul > li).click(function() { 
$(this).add the next li from the pool to this list //this snippet is important for me - how do I write this? 
}); 

ユーザとの対話 これは、それがどのように動作するかをワークフローです - 結果を得るためにすべての良いアイデアのためのIMはオープン

ユーザーは、サムネイル番号3 スクリプト(#pool から項目3を取得し、表示#galleryにそれを引きつけるクリックJavascriptを必要^^)

は次のようになります。

HTML今

<div id="gallery"> 
<ul> 
<li>Item 1</li> <--! Item 1 is the standard item that is shown on the page--> 
<li>Item 3</li> 
</ul> 
</div> 

iMateの

$(#gallery ul).animate(right: -800); 

HTML(私達は項目3に800ピクセルをスクロール)

<div id="gallery"> 
<ul> 
<li>Item 1</li> <--! Item 1 is the standard item that is shown on the page--> 
<li>Item 3</li> <--!The User will see this big picture now --> 
</ul> 
</div> 

Javascriptを

$('#gallery ul li').erase the not see able < li> Item 1 </ li> from the list 

次のようになります。

HTML

<div id="gallery"> 
<ul> 
<li>Item 3</li> <--!The User will see this big picture now and Item 1 is gone--> 
</ul> 
</div> 

ユーザーのクリック2つのサム2

#poolからギャラリーに2つのアイテムを引き付ける!今、私たちはアニメーション

HTML

<div id="gallery"> 
<ul> 
<li>Item 2</li> <--! This is putted above < li> Item 3 < /li> --> 
<li>Item 3</li> <--!The User will see this big picture now and Item 1 is gone--> 
</ul> 
</div> 

:次のようになります。ノー項3の上にそれを置くので、私たちは右

をスクロール左の代わりにスクロールすることができます - しかし、項目3の下に置いてはいけませんユーザーは、現在唯一の項目から画像を見

$(#gallery ul).animate(right: 800); 

(私たちは、項目2に800ピクセルをスクロールする)2

Javascriptを

$('#gallery ul li').erase the not see able < li> Item 3 </ li> from the list 

は次のようになります。あなたが適切にあなたのコードを揃える必要があります

HTML

<div id="gallery"> 
<ul> 
<li>Item 2</li> <--!The User will see this big picture now and Item 3 is gone--> 
</ul> 
</div> 

答えて

関連する問題