Too long too read.
This is the core of my Gallery script. This looks more complicated then it really is.. but of my lack of JQuery (Javascript) knowledge im not able to program it on my own. The most javascript is only pseudo so it where nice if you could translate the pseudo javascript into actually valid javascript (Jquery).
I have a Gallery which shows a big image. I have a thumbnails list which contains some thumb images the user can click on to navigate between the Gallery Images. I have an information pool. Its a list which contains all big images for the Gallery. The Gallery gets its information from this information pool. – I use an invisible pool during some animation issues.
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 e.g.
This is the workflow how it should work – im open for every good idea to get the result
User clicks thumbnail number 3
Script gets Item 3 from the #pool
and attract it to the #gallery (Javascript needed ^^)
Looks like this:
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>
Now we animate (we scroll 800px to Item 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
Should look like this:
HTML
<div id="gallery">
<ul>
<li>Item 3</li> <--!The User will see this big picture now and Item 1 is gone-->
</ul>
</div>
User clicks thumb 2
Attract Item 2 from #pool to the gallery !but dont put it under Item 3 – no put it above Item 3, so we can scroll to the left instead of scrolling right
Should look like this:
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>
Now we animate (we scroll 800px to Item 2)
$(#gallery ul).animate(right: 800);
User now only sees the image from Item 2
Javascript
$('#gallery ul li').erase the not see able < li> Item 3 </ li> from the list
Should look like this:
HTML
<div id="gallery">
<ul>
<li>Item 2</li> <--!The User will see this big picture now and Item 3 is gone-->
</ul>
</div>
You should align your code properly.
There are a lot of jQuery plugins and tutorials on how to do this. Seriously, like, tons.