Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.09.2011, 15:58
Новичок на форуме
Отправить личное сообщение для DrFreud Посмотреть профиль Найти все сообщения от DrFreud
 
Регистрация: 30.08.2011
Сообщений: 7

Оптимизация, точнее переделка кода слайдера
На странице http://lafrombola.ru/?q=high-poly-mg есть две колонки, в одной из них перечислены названия объектов, на второй превью этих объектов. При клике на название (левая колонка) контейнер со списком превью смещается так, чтобы нужная картинка попадала в поле видимости (т.е. умещалась в блок - родитель). Логика смещения организована следующим жутким образом:

$("p.thumbs_list a").click(function(){
		var largePathL = $(this).attr("href");//сохраняем путь ссылки, он совпадает с атрибутом src соответствующей превью
		var thumbpos = $(".thumbs").position();//получаем координаты блока родителя превьюх
		var thumbpostop = thumbpos.top;
		var rightcolumnpos = $("#right-column-thumb").position();//получаем координаты блока родителя родителя превьюх
		var rightcolumnpostop = rightcolumnpos.top;
		var shiftpos = thumbpostop - rightcolumnpostop;//смещение
		var thumb_imgpos = $(".thumb_img img[src="+largePathL+"]").position();//получаем координаты самой превью
		var thumb_imgpostop = thumb_imgpos.top;
                //в зависимости от координаты превьюхи и положения блока - родителя превьюх смещаем этот блок так, чтобы превьюха стала видна 
		if ((thumb_imgpostop<=298) && (shiftpos<0) && (shiftpos>-406)){
			$(".thumbs").animate({top:"+=405px"}, 600);
			} else 
				if ((thumb_imgpostop<=298)&&(shiftpos<-406)){
				$(".thumbs").animate({top:"+=810px"}, 900);
				} else
				if ((thumb_imgpostop>299)&&(thumb_imgpostop<698)&&(shiftpos>=0)){
					$(".thumbs").animate({top:"-=405px"}, 600);
					} else
					if ((thumb_imgpostop>299)&&(thumb_imgpostop<698)&&(shiftpos<-406)){
						$(".thumbs").animate({top:"+=405px"}, 600);
						} else
						if ((thumb_imgpostop>782)&&(thumb_imgpostop<1095)&&(shiftpos<0)&&(shiftpos>-406)){
							$(".thumbs").animate({top:"-=405px"}, 600);
							} else
							if ((thumb_imgpostop>782)&&(thumb_imgpostop<1095)&&(shiftpos>=0)){
								$(".thumbs").animate({top:"-=810px"}, 900);
								}
		});


Как видно, код ужасен во всех отношениях, он зависит от количества картинок и громоздок, каждые следующие 4 картинки увеличат код в арифметической прогрессии...
Можно ли сделать код универсальным и масштабируемым? И какова будет логика... Я нуб в этом деле, но приходится заниматься, если кто заинтересуется - буду рад любой помощи)))
Ответить с цитированием
  #2 (permalink)  
Старый 06.09.2011, 12:44
Новичок на форуме
Отправить личное сообщение для DrFreud Посмотреть профиль Найти все сообщения от DrFreud
 
Регистрация: 30.08.2011
Сообщений: 7

Проблема решилась следующим образом:

firstvis = $(".thumb_img img:eq(0)").offset(); //получаем смещение 1ой картинки
		firstvistop = firstvis.top;
		
		fourthvis = $(".thumb_img img:eq(3)").offset();//получаем смещение 4ой картинки
		fourthvistop = fourthvis.top;
		//в диапазоне между 1ой и 4ой картинкой превью умещаются в блок-родитель, это будет границей видимости

	$("p.thumbs_list a").click(function(){//по клику на ссылку
		var largePathL = $(this).attr("href");//получаем путь к картинке (href ссылки и src соответствующей картинки одинаковы)
		var thumb_imgposoff = $(".thumb_img img[src="+largePathL+"]").offset();//получаем ее смещение
		var thumb_imgofftop = thumb_imgposoff.top;
		var divimgheight = $(".thumb_img:eq(1)").height();//получаем высоту картинки (все превью одинаковы) поэтому берем любую
		if (thumb_imgofftop>fourthvistop){//проверяем находится ли картинка ниже границы видимости и если да, то двигаем div - родитель картинок, до тех пор пока картинка не войдет в диапазон
		do {
			thumb_imgofftop = thumb_imgofftop - divimgheight
			$(".thumbs").animate({top:"-="+divimgheight+""}, 75);
			} while (thumb_imgofftop > fourthvistop)
			} else
			if (thumb_imgofftop < firstvistop){//проверяем находится ли картинка выше границы видимости и т.д.
				do {
					thumb_imgofftop = thumb_imgofftop + divimgheight
					$(".thumbs").animate({top:"+="+divimgheight+""}, 75);
					} while (thumb_imgofftop < firstvistop)
				}

		});


Трабл был в том, что вместо offset использовалось position, который считает координаты от родителя, а не от окна))
Может кому пригодится)))
Единственная проблема с которой я пока не разобрался это как правильно использовать setTimeout или что-то другое для того, чтобы при клике по ссылке в момент исполнения анимации клик не срабатывал, иначе можно сдвинуть блок с превью за пределы видимости...

Последний раз редактировалось DrFreud, 06.09.2011 в 15:29.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Оптимизация кода Prizrak177 Общие вопросы Javascript 0 15.02.2011 16:36
Оптимизация кода mycoding Общие вопросы Javascript 6 21.04.2010 10:42
Оптимизация кода Tohin jQuery 7 11.07.2009 00:55
Помогите пожалуйста. Оптимизация кода. touch_the_sky Элементы интерфейса 21 18.06.2009 19:53
Помогите пожалуйста. Оптимизация кода. touch_the_sky Events/DOM/Window 0 17.06.2009 14:52