Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Скроллер изображений на jquery (https://javascript.ru/forum/jquery/12187-skroller-izobrazhenijj-na-jquery.html)

alexwebck 05.10.2010 11:14

Скроллер изображений на 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:43

Разобрался. Переделал скрипт:
$('.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>


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

alexwebck 05.10.2010 12:46

Появился вопрос. Ширина блока <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 разная.

Skipp 05.10.2010 12:51

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

alexwebck 05.10.2010 13:06

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

Skipp 05.10.2010 13:20

$.eq()

alexwebck 05.10.2010 19:31

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


Часовой пояс GMT +3, время: 15:57.