Галерея изображений - переключение слайдов
 

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

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


Это - код 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();
  
  })

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

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

Вы опубликовали очень много кода.

Пожалуйста, локализуйте проблему!

Выделите фрагмент кода, по которому есть вопрос и опубликуйте его отдельно.

И, по возможности, уберите из кода мусор, чтобы нам легче было сориентироваться и помочь решить вашу проблему.

Спасибо.

P.S. код форматируют специальные теги [ js ] ... [/js], [ html ] ... [/html] и другие аналогичные, сам. http://javascript.ru/formatting

Предыдущий ответ - это шаблонный ответ (есть такая функция на форуме).

А по сути, мне бросается в глаза объявление функций внутри $(document).ready(function(){ и отсутствие ";" в 12-ой строке. Если последнее - мелочь, которая может привести к сбоям в отдельных браузерах, то первое вполне стремно, насколько я знаю.

Ну, и, конечно, php нафиг не нужен - нужна html структура, а лучше live demo.

[quote=cmd;215756]А по сути, мне бросается в глаза объявление функций внутри $(document).ready(function(){ ...
...первое вполне стремно, насколько я знаю.
[quote]

Извините за непонятливость, но я не совсем понимаю, что именно тут не так. Видимо, моих знаний просто недостаточно... (Что касается второго замечания, я добавила ; )

live-demo здесь: http://test.darkloft.co.il/
Я убрала из кода php, оставила html, только теперь большая картинка не сменяется, потому что она у меня загружалась из базы данных через php.
Но суть вопроса относится к превьюшкам, поэтому сосредоточусь на них...

1. 154 строка - не хватает ";"
2. $(document).ready(function(){ это часть JS сценария, которая выполняется _после_ того как вся страница уже загружена. В этой части сценария навешивают события. Объявлять там функции не надо (Вы объявляете там picSlider() ). Функции объявлять лучше отдельно.
3. Не хватает атрибута "ct" к которому Вы обращаетесь в скрипте и атрибута "name" тоже нет, а обращение есть. В общем, демка совсем какая-то не рабочая.

cmd,
Вот поэтому я и здесь :)
Вопрос в том, как сделать ее рабочей. Или может проще будет найти готовый скрипт/шаблон и повесить на сайт? Просто хотелось именно сделать самой, чтобы понять, как это должно работать...

Атрибут "ct" относится к большой картинке, точнее, к привязке между большой картинкой и превьюшкой. Она у меня загружалась через базу данных. Вот так:

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" />';
								}

Я не знаю, как прикрутить ее, не используя php. A "name" - это обращение к стрелкам и оно, вроде, работало...

В общем, стоит мне с этим возиться и причесывать?
Пункты 1 и 2 я исправила, а вот что делать с 3-им?