jQuery cycle & malihu thumbnail scroller - help

JavaScript
1

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


  <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



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

2

OK now I have changed the scrolling method to this method here.

http://valums.com/scroll-menu-jquery/

But I’m having the same problems.

When I hardcode the thumbnails they scroll

http://www.ttmt.org.uk/jquery/scroll/

But when I use ‘cycle’ to create the thumbnails the scrolling stops working.

http://jquery.malsup.com/cycle/pager2.html


<script type="text/javascript">

  $(function(){
    $('#slideshow').cycle({
        fx:     'fade',
        speed:  'fast',
        timeout: 0,
        pager:  '#thumbs',

        pagerAnchorBuilder: function(idx, slide) {
            return '<li><a href="#"><img src="' + slide.src + '" width="auto" height="50" /></a></li>';
        }
    });
  });

  //

  $(function(){
      var div = $('div#thumbWrap'), ul = $('ul#thumbs'), ulPadding = 15;
      var divWidth = div.width();
      div.css({overflow: 'hidden'});
      var lastLi = ul.find('li:last-child');
      div.mousemove(function(e){
        var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;
        var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
        div.scrollLeft(left);
      });
  });

</script>

http://www.ttmt.org.uk/jquery/noscroll/

Can anyone see why the scrolling stops when the thumbnails are added with ‘cycle’ ?

Any help would be really appreciated.