jquery bildergallerie mit einen thumbs

[wolfgang]

hallo zusammen,
ich komme gerade irgendwie nicht weiter.
ich würde gerne eine bildergallerie bauen mit folgenden anforderungen:

• großes bild
  -kleine thumbs die nicht automatisch erzeugt werden, sondern von mir von hand eingepflegt werden
• einen prev, next button
• die thumbs sollen übereinanderstehen. wenn es zu viele werden, soll ein pfeil nach unten auftauchen, wo bei klick die bilder nach oben weglaufen um platz für die neuen zu machen

ich habe derzeit versucht das ganze mit jquery tools umzusetzen.
folgende skripte hab ich versucht zu kombinieren:
http://flowplayer.org/tools/demos/tabs/index.html
http://flowplayer.org/tools/demos/tabs/wizard.html
http://flowplayer.org/tools/demos/scrollable/vertical.html

leider funktioniert es nicht, da beim vertikalen scrollen gleichzeigt die bildgallerei angesprochen wird und nurnoch die ersten 3 bilder angesprochen werden.
anbei der code:

$(document).ready(function() {  
  
$("ul.tabs").tabs("div.panes > div");  
var api = $("ul.tabs").data("tabs");  
  
$("a.next").click(function() {  
 api.next();  
});  
$("a.prev").click(function() {  
 api.prev();  
});  
$(".scrollable").scrollable({ vertical: true, mousewheel: true });  
});  

<a class="prev">prev</a>  
  
  
<!-- root element for scrollable -->  
<div class="scrollable vertical">  
  
   <!-- root element for the scrollable elements -->  
   <div class="items">  
  
      <!-- first element. contains three rows -->  
      <div>  
  
         <!-- first row -->  
         <ul class="tabs">  
         <li class="item"><a href="#" class="w2"><img src="images/index/test.gif" alt="..." /></a></li>  
         <li class="item"><a href="#" class="w2"><img src="images/index/test.gif" alt="..." /></a></li>  
         <li class="item"><a href="#" class="w2"><img src="images/index/test.gif" alt="..." /></a></li>  
         </ul>  
      </div>  
  
      <!-- second element with another three rows (and so on) -->  
      <div>  
  
         <!-- first row -->  
         <ul class="tabs">  
         <li class="item"><a href="#" class="w2"><img src="images/index/test.gif" alt="..." /></a></li>  
         <li class="item"><a href="#" class="w2"><img src="images/index/test.gif" alt="..." /></a></li>  
         <li class="item"><a href="#" class="w2"><img src="images/index/test.gif" alt="..." /></a></li>  
         </ul>  
      </div>  
  
   </div>  
  
</div>  
  
<a class="next">next</a>  
  
<!-- tab "panes" -->  
<div class="panes">  
	<div>1First tab content. Tab contents are called "panes"  
        <a href="#" class="prev">Prev</a>  
        <a href="#" class="next">Next</a>  
	  
        </div>  
	<div>2Second tab content  
        <a href="#" class="prev">Prev</a>  
        <a href="#" class="next">Next</a></div>  
	<div>3Third tab content  
        <a href="#" class="prev">Prev</a>  
        <a href="#" class="next">Next</a></div>  
        <div>4Third tab content  
        <a href="#" class="prev">Prev</a>  
        <a href="#" class="next">Next</a></div>  
        <div>5Third tab content  
        <a href="#" class="prev">Prev</a>  
        <a href="#" class="next">Next</a></div>  
        <div>6Third tab content  
        <a href="#" class="prev">Prev</a>  
        <a href="#" class="next">Next</a></div>  
</div>

so wie ich das sehe, gehe ich den absolut falschen weg.
kann mir jemand einen anderen aufweisen. allerdings muss ich sagen, dass meine js kenntnisse eher begrenzt sind und eher auf die anwenung beziehen.
ich danke euch für eure hilfe.
wolfgang