Показать сообщение отдельно
  #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 картинки увеличат код в арифметической прогрессии...
Можно ли сделать код универсальным и масштабируемым? И какова будет логика... Я нуб в этом деле, но приходится заниматься, если кто заинтересуется - буду рад любой помощи)))
Ответить с цитированием