Показать сообщение отдельно
  #1 (permalink)  
Старый 05.10.2010, 11:14
Новичок на форуме
Отправить личное сообщение для alexwebck Посмотреть профиль Найти все сообщения от alexwebck
 
Регистрация: 05.10.2010
Сообщений: 6

Скроллер изображений на 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() {..., который находится возле него. Это возможно?

Последний раз редактировалось alexwebck, 05.10.2010 в 11:38.
Ответить с цитированием