JQuery - Spezialisierte Hilfe für eine Galerie (große Quest)

Question

Zu lange zu lesen.
Dies ist der Kern meines Gallery-Skripts. Das sieht komplizierter aus, als es wirklich ist. Aber von meinem Mangel an JQuery (Javascript) Wissen kann ich es nicht auf eigene Faust programmieren. Das meiste Javascript ist nur Pseudo, also war es nett, wenn Sie das Pseudojavascript in wirklich gültiges Javascript (Jquery) übersetzen konnten.

Ich habe eine Galerie, die ein großes Bild zeigt. Ich habe eine Thumbnails-Liste, die einige Thumb-Bilder enthält, auf die der Benutzer klicken kann, um zwischen den Gallery Images zu navigieren. Ich habe einen Informationspool. Es ist eine Liste, die alle großen Bilder für die Galerie enthält. Die Galerie erhält ihre Informationen aus diesem Informationspool. - Ich verwende während einiger Animationsprobleme einen unsichtbaren Pool.

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> 

Pseudo (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? 
}); 

User Interaction z.B. Dies ist der Workflow, wie es funktionieren sollte - im offen für jede gute Idee das Ergebnis

Benutzer klickt Miniatur zu erhalten Nummer 3 Script bekommt Punkt 3 von der #pool und ziehen es an die #gallery (Javascript erforderlich ^^)

sieht wie folgt aus:

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> 

Jetzt haben wir ein imate (wir bewegen 800px zu Punkt 3)

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

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> <--!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 

sollte wie folgt aussehen:

HTML

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

Benutzer klickt Daumen 2

Erreiche Artikel 2 von #pool zur Galerie!nicht aber unter Punkt setzen 3 - nicht legte es über Punkt 3, so können wir scrollen nach links statt Scrollen rechts

aussehen sollte wie folgt:

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> 

Jetzt sind wir animieren (wir bewegen 800px zu Punkt 2)

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

Benutzer jetzt sieht nur das Bild von Punkt 2

Javascript

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

sollte wie folgt aussehen:

HTML

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

Answer 1

Sie Ihren Code richtig ausrichten sollte.

Thereare viel jQueryplugins und tutorials, wie dies zu tun. Seriously, like, .