[AngelsPrayer]

Доброго времени суток!
Я новичок в вопросах строения сайтов и нуждаюсь в совете более опытных людей.

Сначала - сама галерея:

<div class="gallery">
               <div class="b_photo">
                  <img src="gallery/big_thumbs/<?=$gallery[0]['gallery_src'];?>" 
id="pic" />
               </div><!-- b_photo -->

               <div class="thumb_box">
                  <div class="left_arr" name="prev"></div>
                  <div class="tmb_slidearea">
                     <div class="tmb_slider">

                     <?
                     foreach($gallery as $gkey=>$gval)
                     {
                        if($gkey == 0)
                           echo '<img ct="'.$gval['gallery_src'].'" src="gallery/small_thumbs/'.$gval['gallery_src'].'" 
id="pic'.$gval['gallery_id'].'" class="thumbnail" 
style="border-color:#FD7600;" />';
                           else
                           echo '<img ct="'.$gval['gallery_src'].'" src="gallery/small_thumbs/'.$gval['gallery_src'].'" 
id="pic'.$gval['gallery_id'].'"class="thumbnail" />';
                        }
                     ?>
                     </div><!-- tmb_slider -->
                  </div><!-- tmb_slidearea -->
                  <div class="right_arr" name="next"></div>
                  <div style="clear:both;"></div>
               </div><!-- thumb_box -->
            </div><!-- gallery -->
<?}?>

Это - код jQuery:

var x=1;
  $(document).ready(function(){
  
      $(".tmb_slider img").click(function(){
         $("#pic").attr({"src":"gallery/big_thumbs/"+$(this).attr('ct')})
         $(".tmb_slider img").css({
            "border":"2px solid #FFFFFF"
         })
         $(this).css({
            "border":"2px solid #FD7600"
         })
      })

      function picSlider(){
      var slideWrap = jQuery('.tmb_slider');
      var nextLink = jQuery('.right_arr');
      var prevLink = jQuery('.left_arr');
   
      var slideWidth = jQuery('.tumbnail').outerWidth();
      
      var newLeftPos = slideWrap.position().left - slideWidth;
      
      nextLink.click(function(){
         if( nextLink.attr('name') == 'next' ) {
            
            nextLink.removeAttr('name');

            slideWrap.animate({left: newLeftPos}, 500, function(){
               slideWrap
                  .find('.thumbnail:first')
                  .appendTo(slideWrap)
                  .parent()
                  .css({'left': 0,
                  'margin-left':'10px'});
            });
            
            setTimeout(function(){ nextLink.attr('name','next') }, 600);

         }
      });

      prevLink.click(function(){
         if( prevLink.attr('name') == 'prev' ) {
         
            prevLink.removeAttr('name');
         
            slideWrap
               .css({'left': newLeftPos})
               .find('.thumbnail:last')
               .prependTo(slideWrap)
               .parent()
               .animate({left: 0}, 500);

            setTimeout(function(){ prevLink.attr('name','prev') }, 600);
         }
      });

   }

   picSlider();
  
  })

Цель была такой: при нажатии на стрелку слайд и большая картинка должны переключаться на следующие/предыдущие. А если слайд находится за видимой областью полосы прокрутки - смещается также и сама полоса. Также можно выбирать желаемое изображение кликом непосредственно по слайду.
На деле у меня получилось выбирать нужную картинку кликом, и смещать полосу прокрутки кликом по стрелкам, но я никак не могу понять, какой функцией привязать стрелки к самим слайдам и большим картинкам и куда именно в коде эту функцию надо вставить...

Пожалуйста, помогите справиться с задачей!
Заранее большое спасибо!