Пытаюсь сделать фотогалерею, проблема возникла при внедрении стрелочек вперед и назад, чтобы картинки листались. Для этого при клике по стрелке сравниваю атрибут сорс преьюшек и большой картинки, и если он совпадает, меняю src большой картинки на srs следующей превьюшки. Со стрелкой "назад" все нормально, но когда жму на стрелку для показа следующей картинки, сразу последняя картинка появляется. Архив со скриптом во вложении. ПАМАГИТЕ ПОСОНЫ!!!
код скрипта:
$(document).ready(function() {
$(document).click( function(event){
if( $(event.target).closest(".big-img").length )
return;
$(".modal").css("display","none");
$(".fon-gallery").css("display","none");
event.stopPropagation();
});
$('.box-img img').click(function(){
$('.big-img img').attr('src', $(this).attr('src'));
$('.modal').css("display","block");
$('.fon-gallery').css("display","block");
return false;
});
$('.prev').click(function(){
$('.box-img img').each(function(){
if (($(this).attr('src')) == ($('.big-img img').attr('src'))){
var a = $(this).parent().prev().children().attr('src');
};
$('.big-img img').attr('src', a);
});
});
//до этого все нормально, а тут и проблема
$('.next').click(function(){
$('.box-img img').each(function(){
if (($(this).attr('src')) == ($('.big-img img').attr('src'))){
var a = $(this).parent().next().children().attr('src');
};
$('.big-img img').attr('src', a);
});
});
});
верстка:
|
Код:
|
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Слайдшоу</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/slaider.js"></script>
<link rel="stylesheet" href="css/style.css" type="text/css"/>
</head>
<body>
<div class="gallery">
<div class="modal">
<div class="gal-close">X</div>
<div class="big-img">
<img src="images/gallery/man1.jpg"/>
<div class="prev">Назад</div>
<div class="next">Вперед</div>
</div>
</div>
<div class="box-img">
<div class="img-cont"><img class="min-img" src="images/tachka1.jpg"/></div>
<div class="img-cont"><img class="min-img" src="images/tachka2.jpg"/></div>
<div class="img-cont"><img class="min-img" src="images/tachka3.jpg"/></div>
</div>
</div>
<div class="fon-gallery"></div>
</body>
</html> |
Стили CSS:
|
Код:
|
/*------gallery------*/
.modal{
position: fixed;
display: none;
width: 700px;
height: 530px;
top: 50px;
z-index: 1000;
}
.gal-close{
width: 20px;
height: 20px;
float: right;
position: relative;
top: 26px;
cursor: pointer;
font-weight: bold;
color: #ffffff;
background: #30E728;
text-align: center;
}
.big-img, .big-img img{
width: 700px;
height: 500px;
}
.big-img img{
border: 3px solid #7B090B;
}
.box-img img{
float: left;
width: 220px;
height: 180px;
margin: 20px;
cursor: pointer;
}
.prev, .next{
position: absolute;
top: 120px;
width: 77px;
height: 100px;
z-index: 100;
cursor: pointer;
}
.prev{
background: url(../images/left.png) top center no-repeat;
left: 0px;
}
.next{
right: 0px;
background: url(../images/right.png) top center no-repeat;
}
.fon-gallery{
background: #000000;
width: 100%;
height: 100%;
opacity: 0.5;
position: absolute;
display: none;
left: 0;
top: 0;
} |