jQuery cycle & malihu thumbnail scroller - help.


Hi all


I'm having really problems here and I'm hoping someone can help.


I'm trying to create a slideshow with scrollable thumbnails underneath.


In this example here I'm using the jQuery cycle plugin to create the slideshow and


the malihu thumbnail scroller - http://manos.malihu.gr/jquery-thumbnail-scroller


to create the scrollable thumbnails


http://www.ttmt.org.uk/forum/scroll/myScroller.html


The thumbnails scroll but they are hard coded into the html


Code:
  <div id="tS2" class="jThumbnailScroller">
      <div class="jTscrollerContainer">
          <div class="jTscroller">
        
            <a href=""><img src="01_th.jpg" alt="" /></a>
        <a href=""><img src="02_th.jpg" alt="" /></a>
        <a href=""><img src="03_th.jpg" alt="" /></a>
        <a href=""><img src="04_th.jpg" alt="" /></a>
        <a href=""><img src="05_th.jpg" alt="" /></a>
        <a href=""><img src="06_th.jpg" alt="" /></a>
                
          </div>
      </div>
      <a href="#" class="jTscrollerPrevButton"></a>
      <a href="#" class="jTscrollerNextButton"></a>
  </div>

I want to use the pagerAnchorBuilder: function in cycle to create the thumbnails but then the thumbnails load below each other and the scrolling stops.


http://www.ttmt.org.uk/forum/noscroll/myScroller.html


Code:

<div id="tS2" class="jThumbnailScroller">
    <div class="jTscrollerContainer">
        <div class="jTscroller">
      <!--
          <a href=""><img src="01_th.jpg" alt="" /></a>
      <a href=""><img src="02_th.jpg" alt="" /></a>
      <a href=""><img src="03_th.jpg" alt="" /></a>
      <a href=""><img src="04_th.jpg" alt="" /></a>
      <a href=""><img src="05_th.jpg" alt="" /></a>
      <a href=""><img src="06_th.jpg" alt="" /></a>
      <a href=""><img src="01_th.jpg" alt="" /></a>
      <a href=""><img src="02_th.jpg" alt="" /></a>
      <a href=""><img src="03_th.jpg" alt="" /></a>
      <a href=""><img src="04_th.jpg" alt="" /></a>
      <a href=""><img src="05_th.jpg" alt="" /></a>
      <a href=""><img src="06_th.jpg" alt="" /></a>
      -->
        </div>
    </div>
    <a href="#" class="jTscrollerPrevButton"></a>
    <a href="#" class="jTscrollerNextButton"></a>
</div>




<script type="text/javascript">
  $(document).ready(function() {
    
    $('#slideshow').cycle({ 
        fx:     'fade', 
        speed:  'fast', 
        timeout: 0,
        pager:  '.jTscroller', 
        
        pagerAnchorBuilder: function(idx, slide) { 
            return '<a href="#"><img src="' + slide.src + '" width="auto" height="60" /></a>'; 
        } 
        
    }); 
  });
</script>



So if I hard code the thumbnails the scroller works, if I try to create the thumbnails with cycle it doesn't


Can anyone see a way i might be able to get this to work.