Скроллер изображений на jquery
 

Здравствуйте. У меня есть скрипт скроллера изображений:

<script type="text/javascript">

$(document).ready(function(){  

$('.common_photos_inner').click(function() {
var scrollAmount = $(this).width() - $(this).parent().width();
var currentPos = Math.abs(parseInt($(this).css('left')));
var remainingScroll = scrollAmount - currentPos;
// Scroll half-a-screen by default
var nextScroll = Math.floor($(this).parent().width() / 2);
// But if there isn’t a FULL scroll left,
// only scroll the remaining amount.
if (remainingScroll < nextScroll) {
nextScroll = remainingScroll;
}
if (currentPos < scrollAmount) {
// Scroll left
$(this).animate({'left':'-=' + nextScroll}, 'slow');
}
else{
// Scroll right
$(this).animate({'left':'0'}, 'fast');
}
});

});
</script>

Вот блоки с которыми работаю:

<div id="photos">
<div id="photos_inner" class="common_photos_inner">
     <img src='../gallery/02/thumb/Gotsiy_Natashaprv.jpg'>
     <img src='../gallery/02/thumb/Gubina_34058prv.jpg'>
     <img src='../gallery/02/thumb/Igor-Kondratyuk_0043prv.jpg'>
     <img src='../gallery/02/thumb/Igor-Kondratyuk_0049prv.jpg'>
     <img src='../gallery/02/thumb/Indian_07293prv.jpg'>
     <img src='../gallery/02/thumb/IRA_7749prv.jpg'>
     <img src='../gallery/02/thumb/Julia_0003_2_LUCprv.jpg'>
     <img src='../gallery/02/thumb/Julia_04_0054_6prv.jpg'>
     <img src='../gallery/02/thumb/Julia_2_0048_3prv.jpg'>
</div>
<div id="next">next</div>

<div id="photos_inner1" class="common_photos_inner">
     <img src='../gallery/02/thumb/Gotsiy_Natashaprv.jpg'>
     <img src='../gallery/02/thumb/Gubina_34058prv.jpg'>
     <img src='../gallery/02/thumb/Igor-Kondratyuk_0043prv.jpg'>
     <img src='../gallery/02/thumb/Igor-Kondratyuk_0049prv.jpg'>
     <img src='../gallery/02/thumb/Indian_07293prv.jpg'>
     <img src='../gallery/02/thumb/IRA_7749prv.jpg'>
     <img src='../gallery/02/thumb/Julia_0003_2_LUCprv.jpg'>
     <img src='../gallery/02/thumb/Julia_04_0054_6prv.jpg'>
     <img src='../gallery/02/thumb/Julia_2_0048_3prv.jpg'>
</div>
<div id="next">next</div>

Сейчас скроллеры работают правильно, но по клику на них самих. Как сдлеать, чтобы все работало также только, при клике на <div id="next">next</div>, который находится возле каждого скроллера?

Интересует как обратится к нужному блоку photos_inner1 или photos_inner, с помощью $('#next').click(function() {..., который находится возле него. Это возможно?

Разобрался. Переделал скрипт:

$('.button').click(function() {
var scrollAmount = $(this).prev().width() - $(this).prev().parent().width();
var currentPos = Math.abs(parseInt($(this).prev().css('left')));
var remainingScroll = scrollAmount - currentPos;
// Scroll half-a-screen by default
var nextScroll = Math.floor($(this).prev().parent().width() / 2);
// But if there isn’t a FULL scroll left,
// only scroll the remaining amount.
if (remainingScroll < nextScroll) {
nextScroll = remainingScroll;
}
if (currentPos < scrollAmount) {
// Scroll left
$(this).prev().animate({'left':'-=' + nextScroll}, 'slow');
}
else{
// Scroll right
$(this).prev().animate({'left':'0'}, 'fast');
}
});

Также изменил <div id="next">next</div>:

...
<div id="next1" class="button">next</div>
...
<div id="next1" class="button">next</div>

Может кому-то пригодится

Появился вопрос. Ширина блока <div id="photos_inner" class="common_photos_inner"> постоянно меняется. В css ее задавать каждый раз безсымсленно.

<div id="photos_inner" class="common_photos_inner">
      <img src='../gallery/02/thumb/Gotsiy_Natashaprv.jpg'>
      <img src='../gallery/02/thumb/Gubina_34058prv.jpg'>
      <img src='../gallery/02/thumb/Igor-Kondratyuk_0043prv.jpg'>
      <img src='../gallery/02/thumb/Igor-Kondratyuk_0049prv.jpg'>
      <img src='../gallery/02/thumb/Indian_07293prv.jpg'>
      <img src='../gallery/02/thumb/IRA_7749prv.jpg'>
      <img src='../gallery/02/thumb/Julia_0003_2_LUCprv.jpg'>
      <img src='../gallery/02/thumb/Julia_04_0054_6prv.jpg'>
      <img src='../gallery/02/thumb/Julia_2_0048_3prv.jpg'>
</div>

Я убрал ширину в css вообще, скроллер не работает. Получил ширину вот так $('#photos').width();.

Как ее добавить ко весм блокам ( $('#photos'), $('#photos1') ) в атрибуте style в скрипте? (Ширина блоков photos и photos 1 разная.

по классу бери
$(".common_photos_inner").css(..

Спасиюо. Так и сделаю. Интересует как пробежаться по всем блока <div id="photos_inner" class="common_photos_inner">, <div id="photos_inner1" class="common_photos_inner"> ,чтобы добавить им разную ширину

$.eq()

Все работает. Только один момент. В Safari, Opera и Chrome нужно два раза нажать на кнопку <div id="next1" class="button">next</div>, чтобы скролл заработал, а потом работает как надо. В Firefox все отлично. В чем может быть дело?