팝업 이미지 제이쿼리 도와주세요..ㅠㅜ
본문
일단 문제는
1번 이미지 팝업 후 <이나 >를 눌러서 이미지를 변경 후에 끄고
2범 이미지를 누르면 2번 이미지가 나와야 하는데
<>로 돌리고 난 후에 마지막 이미지가 나옵니다ㅜㅜ
소스 입니다 ㅠㅠ
<!doctype html>
<html>
<head>
<title> </title>
<meta charset="utf-8">
<script src="js/jquery-1.12.4.min.js"></script>
<style>
*{margin:0;padding:0;}
a{text-decoration:none;color:#777;display:inline-block;}
.clear:after{display:block;content:'';clear:both;}
.con{width:1000px;height:2000px;margin:50px auto;padding:20px 0 ;border:2px dashed #ddd;}
.con .img>div img{display:block;}
.con .img>div{float:left;margin:0 25px;}
.overlay{position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,0.5);display:none;}
.pic{position:relative;width:335px;height:480px;margin:100px auto;}
.close{position:absolute;right:0px;top:0px;color:hotpink;font-weight:bold;background:#333;padding:5px;}
.btn{position:absolute;top:45%;color:white;}
.prev{left:-40px;}
.next{right:-40px;}
</style>
<script>
$(function(){
var i=1;
$('.about').click(function(){
$(this).next().show();
$('body').css({overflow:"scroll"});
return false;
});
$('.close').click(function(){
$('.overlay').hide();
});
$('.next').click(function(){
i++;
if(i>6){i=1;}
$('.pic>img').attr('src','images/img'+i+'.jpg');
});
$('.prev').click(function(){
i--;
if(i<1){i=6;}
$('.pic>img').attr('src','images/img'+i+'.jpg');
});
})
</script>
</head>
<body>
<div class="con clear">
<div class="img clear">
<div>
<a href="#" class="about">
<img src="images/img1s.jpg" alt="dd"></a>
<div class="overlay">
<div class="pic">
<img src="images/img1.jpg" alt="">
<a href="#" class="close">close</a>
<a href="#" class="btn prev">Prev</a>
<a href="#" class="btn next">Next</a>
</div>
</div>
</div>
<div>
<a href="#" class="about">
<img src="images/img2s.jpg" alt="dd"></a>
<div class="overlay">
<div class="pic">
<img src="images/img2.jpg" alt="">
<a href="#" class="close">close</a>
<a href="#" class="btn prev">Prev</a>
<a href="#" class="btn next">Next</a>
</div>
</div>
</div>
<div>
<a href="#" class="about">
<img src="images/img3s.jpg" alt="dd"></a>
<div class="overlay">
<div class="pic">
<img src="images/img3.jpg" alt="">
<a href="#" class="close">close</a>
<a href="#" class="btn prev">Prev</a>
<a href="#" class="btn next">Next</a>
</div>
</div>
</div>
<div>
<a href="#" class="about">
<img src="images/img4s.jpg" alt="dd"></a>
<div class="overlay">
<div class="pic">
<img src="images/img4.jpg" alt="">
<a href="#" class="close">close</a>
<a href="#" class="btn prev">Prev</a>
<a href="#" class="btn next">Next</a>
</div>
</div>
</div>
<div>
<a href="#" class="about">
<img src="images/img5s.jpg" alt="dd"></a>
답변 3
왜 이렇게 하셧는지 모르겠네요
about 클래스를 클릭해서 해당 이미지의 pic div 가 나오고
next, prev 가 눌려지면 해당 pic 이 아닌 전체 pic 의 이미지 주소를 통째로 바꿔버리는군요
임시 방편이긴 하지만 이렇게 바꿔보면 어떨까요?
$('.about').click(function(){
var img = $(this).find('img').attr('src');
$(this).next().find('img').attr('src',img);
$(this).next().show();
$('body').css({overflow:"scroll"});
return false;
});
r감사합니다 감사합니다 해결했어요 진짜진짜 진짜진짜찐짜찐짜 감사해요 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
그냥 닫기버튼에 새로고침을 추가해주세요
window reload
답변 감사합니다.그런데 이렇게하면 페이지가 새러고침되서 쓰기가 힘드네용ㅜㅡㅜ
닫았을때는 i값을 다시 초기화 시켜야하지않을까요?
닫았다가 다른 이미지를 클릭했을때 그 i값가지고 이미지명 뒤에 순번을 맞추시는거같은데..
닫았다면 i = 1로 다시 초기화해주시면 될거같긴한데요..?...저도 직접 디버깅을 해봐야알겠지만..
네네 맞습니다ㅠ_ㅠ 제이쿼리 초반에 var i=0으로 초기화를 시켜놨는데 그게 아닌걸까요?ㅠ_ㅠ
답변 달아주셔서 감사합니다-!
위에 코드 보니 로드가 되었을때 var i = 1로 초기화는 하셨는데요
닫기버튼을 클릭했을때도 다시 i = 1; 로 되돌려 주셔야 원점으로 돌아온다는 말씀을 드린겁니다^^
