레이어팝업을 사용하는데요...클릭시만 이미지 다운로딩이 가능한지?
본문
아래와 같은 방식을 상품을 노출하고 있는데
상품이 점점 많아짐에 따라, 상품가 상세정보가 로딩되는 시간이
점점 늘어나고 있어서 해결방법이 없을까요?
위그림에서 8개 상품이미지만 로딩되고,
사용자가 상세버튼을 눌렀을 때만 해당 상품 상세 이미지가 레이업팝업이 되면 되는데
현재는 8개의 기본이미지와 상품 상세이미지가 모두 로딩되었다가
상세버튼을 누르면 바로 화면에 레이어 팝업이 되고 있는거 같아요...
클릭시만 상품 상세 이미지 다운로딩이 가능한지?
<!DOCTYPE html>
<html>
<head>
<title> layer popup </title>
<script src="http://code.jquery.com/jquery-1.7.js" type="text/javascript"></script>
<script src="http://cfs.tistory.com/custom/blog/173/1736984/skin/images/jquery.bpopup.min.js" type="text/javascript"></script>
<script type="text/javascript">
function go_popup() {
$('#popup').bPopup();
};
</script>
<style type="text/css">
.Pstyle {
opacity: 0;
display: none;
position: relative;
width: auto;
border: 5px solid #fff;
padding: 20px;
background-color: #fff;
}
.Xclose{
position: absolute;
right: 5px;
top: 5px;
padding: 5px;
display: inline-block;
cursor: pointer;
}
</style>
</head>
<body>
<input type="button" value="상세" onclick="go_popup()">
<div id="popup" class="Pstyle">
<span class="Xclose"> X</span>
<div class="content" style="height:auto; width:auto;">
Layer popup OK <br>
<p align="center"><img border="0" src="http://heabburnlee.cafe24.com/HTML/bodysuit-brand-story.jpg"></p>
</div>
</div>
</body>
</html>
답변 1
일단, 지금 쓰고 계시는 외부 플러그인 보다는 ajax를 이용하여 새로 만드시는게 좋겠습니다.
간단한 샘플을 보세요
function go_popup() {
$.ajax({
type: 'post',
url: './index.php',
data: {'key':$(this).val()},
dataType: 'json',
success: function(data) {
//성공시 custom function;
},
error: function(data, status, err) {
//실패시 custom function;
}
});
}
process 파일에서는 json_encode를 이용하시구요
답변을 작성하시기 전에 로그인 해주세요.
