Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Jun 2011
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts

    jQuery cycle & malihu thumbnail scroller - help.

    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.
    Last edited by VIPStephan; 04-14-2012 at 07:19 PM. Reason: added framework prefix

  • #2
    New Coder
    Join Date
    Jun 2011
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •