Всем доброго времени суток.
Пишу скрипт галерейки и столкнулся с проблемой.
HTML код галереи выглядит следующим образом:
<div class="imgs_block_big">
<div id="1" class="img_item"></div>
<div id="2" class="img_item"></div>
<div id="3" class="img_item"></div>
<div id="4" class="img_item"></div>
<div id="5" class="img_item"></div>
<div id="6" class="img_item"></div>
</div>
С соответствующими стилями и форматированием. Всё это дело оживляется следующим кодом:
imgarr = ["../../images/test_big0.jpg",
"../../images/test_big1.jpg",
"../../images/test_big0.jpg",
"../../images/test_big1.jpg",
"../../images/test_big0.jpg",
"../../images/test_big1.jpg"];
var param = {
first : 1,
last : 6,
curnt : 3
};
function Start()
{
//отображает первоначальные 3 элемента: центральную картинку и 2 "кнопки"
}
$(document).load(function(){
Start();
});
$(document).ready(function(){
$("div.img_item").eq(param.curnt).mouseover(function(){
$("div.img_item").eq(param.curnt).animate({"left": "-=20px"}, "fast");
});
$("div.img_item").eq(param.curnt).mouseout(function(){
$("div.img_item").eq(param.curnt).animate({"left": "+=20px"}, "fast");
});
$("div.img_item").eq(param.curnt-2).mouseover(function(){
$("div.img_item").eq(param.curnt-2).animate({"left": "+=20px"}, "fast");
});
$("div.img_item").eq(param.curnt-2).mouseout(function(){
$("div.img_item").eq(param.curnt-2).animate({"left": "-=20px"}, "fast");
});
$("div.img_item").eq(param.curnt).click(function(){
var w_Gal = document.documentElement.clientWidth > 1020 ? document.documentElement.clientWidth : 1020;
var betw_space = (w_Gal/2-150)+240;
$("div.img_item").eq(param.curnt).css("left", (w_Gal-60)+"px");
if ((param.curnt) != param.last) {
$("div.img_item").eq(param.curnt+1).css("left", (w_Gal+betw_space-80)+"px");
$("div.img_item").eq(param.curnt+1).css("background-image", "url('"+imgarr[param.curnt+1]+"')");
$("div.img_item").eq(param.curnt+1).css("visibility", "visible");
}
for (var i = param.curnt-2; i <= param.curnt+1; i++)
{
$("div.img_item").eq(i).animate({"left": "-="+betw_space+"px"}, "slow");
}
$("div.img_item").eq(param.curnt-2).css("visibility", "hidden");
param.curnt++;
});
$("div.img_item").eq(cur_img-2).click(function(){
var w_Gal = document.documentElement.clientWidth > 1020 ? document.documentElement.clientWidth : 1020;
var betw_space = (w_Gal/2-150)+240;
$("div.img_item").eq(cur_img-2).css("left", "-240px");
if ((param.curnt-2) != param.first) {
$("div.img_item").eq(param.curnt-3).css("left", (-240-betw_space)+"px");
$("div.img_item").eq(param.curnt-3).css("background-image", "url('"+imgarr[param.curnt-3]+"')");
$("div.img_item").eq(param.curnt-3).css("visibility", "visible");
}
for (var i = param.curnt-3; i <= param.curnt; i++)
{
$("div.img_item").eq(i).animate({"left": "+="+betw_space+"px"}, "slow");
}
$("div.img_item").eq(param.curnt).css("visibility", "hidden");
cur_img--;
});
});
Поначалу всё работает нормально, но как только пролистываем галерею на одно изображение вправо или влево, то обработка событий ...mouseover(function(){...}); и ...mouseout(function(){...}); остаётся привязанной к тем же двум дивам, что и в начале (для первого изображения), а вот тела этих функций работают нормально (то есть анимируется нужный элемент).
Подскажите, как вызывать обработчик, чтобы можно было динамически переназначать элементы, к которым он относится?
Уже второй день с этим мучаюсь не могу ответ найти=(
