あまりにも長く読まれました。
これは私のギャラリースクリプトの中核です。これはもっと複雑に見えますが、それは本当に..ですが、私の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>