Hi,

I am trying recreate the following type of scrolling thumbnail navigation as described in the following tutorial:

http://tympanus.net/codrops/2010/05/10/scrollable-thumbs-menu/

I require my thumbs to slide out horizontally from the left. I have amended the code to the best of my abilities, but I can't get it to work. (Think the problem is in the top third of the jquery).

Here is what I have to date:

HTML

<ul class="menu" id="menu">
    <li>
        <a href="#"></a>
        <div class="sc_menu_wrapper">
            <div class="sc_menu">
                <a href="#"><img src="images/gallery/1.jpg" alt=""/></a>
                <a href="#"><img src="images/gallery/2.jpg" alt=""/></a>
                <a href="#"><img src="images/gallery/3.jpg" alt=""/></a>
                <a href="#"><img src="images/gallery/4.jpg" alt=""/></a>
                <a href="#"><img src="images/gallery/5.jpg" alt=""/></a>
            </div>
        </div>
    </li>
    </ul>

CSS

/* Navigation Style */
ul.menu{
position: fixed;
top: 0px; 
left:0px;
width: 100%;
}

ul.menu li{
position:relative;
width: 100% 
}

ul.menu li > a{
position:absolute;
top:300px;
left:0px;
width:40px;
height:200px;
background-color:#e7e7e8;
}

/* Thumb Scrolling Style */

div.sc_menu_wrapper {
position: absolute;
right: 0px; 
height: 220px;
overflow: hidden;
top: 300px; 
left:0px;
visibility:hidden;
}

div.sc_menu {
height: 200px; 
visibility:hidden;
}

.sc_menu a {
display: block;
background-color:#e7e7e8;
}
.sc_menu img {
display: block;
border: none;
opacity:0.3;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
}

JQUERY

  $(function(){

      // function to make the thumbs menu scrollable 
            function buildThumbs($elem){
                var $wrapper        = $elem.next();
                var $menu       = $wrapper.find('.sc_menu');
                var inactiveMargin  = 220;

                // move the scroll down to the beggining (move as much as the height of the menu)

                $wrapper.scrollRight($menu.outerHeight());

               //when moving the mouse up or down, the wrapper moves (scrolls) up or down 

                $wrapper.bind('mousemove',function(e){

                    var wrapperWidth    = $wrapper.width();
                    var menuWidth   = $menu.outerWidth() + 2 * inactiveMargin;
                    var top     = (e.pageX - $wrapper.offset().right) * (menuWidth - wrapperWidth) / wrapperWidth - inactiveMargin;

                   $wrapper.scrollRight(right+10);
                });
            }

      var stacktime;

      $('#menu li > a').bind('mouseover',function () {
          var $this = $(this);

          buildThumbs($this);

          var pos   =   $this.next().find('a').size();
          var f =   function(){
              if(pos==0) clearTimeout(stacktime);
              $this.next().find('a:nth-child('+pos+')').css('visibility','visible');
              --pos;
          };

          // each thumb will appear with a delay 
          stacktime = setInterval(f , 50);
      });


      /// on mouseleave of the whole <li> the scrollable area is hidden 
      $('#menu li').bind('mouseleave',function () {
          var $this = $(this);
          clearTimeout(stacktime);
          $this.find('.sc_menu').css('visibility','hidden').find('a').css('visibility','hidden');
          $this.find('.sc_menu_wrapper').css('visibility','hidden');
      });

      // when hovering a thumb, change its opacity 
      $('.sc_menu a').hover(
      function () {
          var $this = $(this);
          $this.find('img')
          .stop()
          .animate({'opacity':'1.0'},400);
      },
      function () {
          var $this = $(this);
          $this.find('img')
          .stop()
          .animate({'opacity':'0.3'},400);
      }
  );
  });

Wondering if some eagle eye might be able to point out where I am going wrong. As my knowledge of JQuery is limited, I'm guessing it is in there.

I really appreciate anyone taking the time to look this over.

Thank you!