Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.10.2010, 10: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 в 10:38.
Ответить с цитированием
  #2 (permalink)  
Старый 05.10.2010, 10:43
Новичок на форуме
Отправить личное сообщение для alexwebck Посмотреть профиль Найти все сообщения от alexwebck
 
Регистрация: 05.10.2010
Сообщений: 6

Разобрался. Переделал скрипт:
$('.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 в 10:57.
Ответить с цитированием
  #3 (permalink)  
Старый 05.10.2010, 11:46
Новичок на форуме
Отправить личное сообщение для alexwebck Посмотреть профиль Найти все сообщения от alexwebck
 
Регистрация: 05.10.2010
Сообщений: 6

Появился вопрос. Ширина блока <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 разная.
Ответить с цитированием
  #4 (permalink)  
Старый 05.10.2010, 11:51
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,805

по классу бери
$(".common_photos_inner").css(..
__________________
.
Ответить с цитированием
  #5 (permalink)  
Старый 05.10.2010, 12:06
Новичок на форуме
Отправить личное сообщение для alexwebck Посмотреть профиль Найти все сообщения от alexwebck
 
Регистрация: 05.10.2010
Сообщений: 6

Спасиюо. Так и сделаю. Интересует как пробежаться по всем блока <div id="photos_inner" class="common_photos_inner">, <div id="photos_inner1" class="common_photos_inner"> ,чтобы добавить им разную ширину
Ответить с цитированием
  #6 (permalink)  
Старый 05.10.2010, 12:20
Аватар для Skipp
.
Отправить личное сообщение для Skipp Посмотреть профиль Найти все сообщения от Skipp
 
Регистрация: 30.03.2010
Сообщений: 1,805

$.eq()
__________________
.
Ответить с цитированием
  #7 (permalink)  
Старый 05.10.2010, 18:31
Новичок на форуме
Отправить личное сообщение для alexwebck Посмотреть профиль Найти все сообщения от alexwebck
 
Регистрация: 05.10.2010
Сообщений: 6

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамически загружаемая jQuery и jQuery-функции в одном файле 67bytes Общие вопросы Javascript 6 06.03.2013 07:01
2 разных модуля на jQuery - как подключить? finder jQuery 4 23.03.2012 20:29
замена изображений в jquery при наведении zlokiz jQuery 0 05.08.2010 21:17
jQuery jTreeMenu plugin Seafnox jQuery 9 12.01.2010 20:55
JQuery + Ajax = загрузка изображений jokerbot jQuery 0 06.12.2009 14:10