How to Make an Elegant Sliding Image Gallery with jQuery

    if ( preloaded == preloadSlides || preloaded == totalSlides ) {
      $('#loading').clearQueue().stop().fadeTo('slow', 0 );
      $('#gallery').css('top',0);
      $('#gallery').fadeTo('slow', 1 );
      $('#leftButton').css('height',buttonHeight);
      $('#rightButton').css('height',buttonHeight);
      $('#rightButton').show();
      addSlideHover();
      loading = false;
      setTimeout( moveRight, 500 );
    }

  display: none;

  // Stop any fades on the caption and hide it
  $('#caption').stop().clearQueue().hide();

<a href="#" onclick="moveToSlide(3)"><img ...></a>

function moveToSlide(gotoSlide) {
  
  var num = 0;
  skipSlide = gotoSlide-currentSlide;
  
  if(skipSlide>0)
  skipUpDown = false;
  else
  skipUpDown = true;
  
  numberSkip = (Math.abs(skipSlide))-1;
    
  if(skipUpDown)
  {
    for(num=0;num<=numberSkip;num++)
    {
      slides[currentSlide].unbind('mouseenter').unbind('mouseleave').unbind('touchstart');
      $('#caption').stop().clearQueue().hide();
      
      var offset = 0;  
        for(num=0;num<=numberSkip;num++)
        {
          offset += slideWidths[currentSlide]/2 + slideHorizMargin*2 + slideWidths[currentSlide-1]/2;
          if(num==numberSkip) $('#gallery').animate( { left: '+=' + offset },400 );
          if(num==0) slides[currentSlide].animate( { opacity: backgroundSlideOpacity } );
          if(num==numberSkip) slides[currentSlide-1].animate( { opacity: currentSlideOpacity } );
          currentSlide--;
        }

      setButtonStates();
      $('#caption').html( slides[currentSlide].attr('alt') );
      addSlideHover();
    }
  }
  else
  {
       
      slides[currentSlide].unbind('mouseenter').unbind('mouseleave').unbind('touchstart');
      $('#caption').stop().clearQueue().hide();
      
      var offset = 0;  
        for(num=0;num<=numberSkip;num++)
        {
          offset += slideWidths[currentSlide]/2 + slideHorizMargin*2 + slideWidths[currentSlide+1]/2;
          if(num==numberSkip) $('#gallery').animate( { left: '-=' + offset },400 );
          if(num==0) slides[currentSlide].animate( { opacity: backgroundSlideOpacity } );
          if(num==numberSkip) slides[currentSlide+1].animate( { opacity: currentSlideOpacity } );
          currentSlide++;
        }

      setButtonStates();
      $('#caption').html( slides[currentSlide].attr('alt') );
      addSlideHover();
  } 
  
}

$(function(){
    $("#thumbs a img").fadeTo("fast", 0.5); 

    $("#thumbs a").bind({
        mouseenter:function(){
            $('img', this).fadeTo("slow", 1);
        },mouseleave: function(){
            $('img', this).fadeTo("slow", 0.5); 
        }
    });
});

var image = $("#thumbs a:eq(" + currentSlide + ") img");
image.fadeTo("slow", 1);

function addSlideHover() {

  if ( 'ontouchstart' in document.documentElement ) {
    slides[currentSlide].bind( 'touchstart', function() {
      if ( $('#caption').is(':visible') ) {
        $('#caption').stop().clearQueue().fadeOut( captionSpeed );
      } else {
        $('#caption').stop().clearQueue().fadeTo( captionSpeed, captionOpacity );
      }
    } );
  } else {
    slides[currentSlide].hover(
      function() { $('#caption').stop().fadeTo( captionSpeed, captionOpacity ) },
      function() { $('#caption').stop().fadeTo( captionSpeed, 0 ) }
    );
  }
}

var currentSlide = 1;                 // The slide that the user is currently viewing

  if ( $(this).data('slideNum') == 0 ) {
    centreCurrentSlide();
    $(this).fadeTo( 'slow', currentSlideOpacity );
  } else {
    $(this).fadeTo( 'slow', backgroundSlideOpacity );
  }

  if ( $(this).data('slideNum') == 1 ) {
    centreCurrentSlide();
    $(this).fadeTo( 'slow', currentSlideOpacity );
  } else {
    $(this).fadeTo( 'slow', backgroundSlideOpacity );
  }

var windowCentre = $(window).width() / 2;

  $('#gallery p').each( function() {
    $(this).hide();
    $(this).data( 'slideNum', totalCaptions );
    slideCaptions[totalCaptions++] = $(this);
  } );

  $('#caption').html( slideCaptions[currentSlide].html() );