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