Пытаюсь сделать собственную галерею. Выглядит так: по левому краю вертикально располагаются миниатюры. При клике на миниатюру справа от них открывается полноразмерное изображение, с анимацией. По клику на полноразмерное изображение оно убирается, тоже с анимацией. Если, при открытом полноразмерном изображении кликнуть на другую миниатюру, полноразмерное изображение убирается и открывается новое.
Получилось следующее: При первом клике происходит все правильно. При клике на другую миниатюру - тоже все правильно. Но при третьем клике, на третью миниатюру, или при клике на большом изображении - начинается мигание больших изображений.
Вот код:
HTML:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta name="" content="">
<link rel="stylesheet" type="text/css" href="style1.css" />
<script type="text/javascript" src="Scripts/js/MyGalery.js"></script>
</head>
<body>
<div class="small_img">
<img class="small" src="photo/1.JPG" onclick="get_big_img('photo/1.JPG')" />
<img class="small" src="photo/2.JPG" onclick="get_big_img('photo/2.JPG')" />
<img class="small" src="photo/3.JPG" onclick="get_big_img('photo/3.JPG')" />
</div>
<div class="big_img_div" id="big_div" >
<img class="big" id="big_img" src="" onclick="img_hide(false)" />
</div>
</body>
</html>
CSS:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
.small_img {
float: left;
cursor: pointer;
}
.small {
width: 150px;
-moz-transition: all 1s;
}
.small:hover {
-moz-transform: rotate(10deg);
}
#big_img{
width:0px;
}
.big_img_div {
float: left;
margin-left: 5px;
cursor: pointer;
}
@keyframes animatPlus {
from {width:0px;}
to {width:400px;}
}
@keyframes animatMinus {
from {width:400px;}
to {width:0px;}
}
JavaScript:
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
function get_big_img(puth){
BigImg = document.getElementById("big_img");
var src = BigImg.getAttribute("src");
if(src != puth && src != ''){
img_hide(BigImg);
setInterval(function(){
img_show(BigImg,puth)
},
1000);
}
else{
img_show(BigImg,puth);
}
return true;
}
function img_show(elem,puth){
BigImg.setAttribute("src",puth);
BigImg.style.width = '400px';
BigImg.style.animation = 'animatPlus 1s';
return true;
}
function img_hide(BigImg){
if(!BigImg){
BigImg = document.getElementById("big_img");
}
BigImg.style.width = '0px';
BigImg.style.animation = 'animatMinus 1s';
return true;
}
Подскажите, из-за чего такое может быть и как с этим бороться?
Проверяю в Firefox 26.0.
И сразу еще один вопрос:
Я меняю через JavaScript стили. А как через JAvascript назначить стили, которые начинаются с "-moz", "-o", "-webkit", "-ms"?
