레이어팝업을 사용하는데요...클릭시만 이미지 다운로딩이 가능한지? 채택완료
더블피디
10년 전
조회 5,457
아래와 같은 방식을 상품을 노출하고 있는데
상품이 점점 많아짐에 따라, 상품가 상세정보가 로딩되는 시간이
점점 늘어나고 있어서 해결방법이 없을까요?
위그림에서 8개 상품이미지만 로딩되고,
사용자가 상세버튼을 눌렀을 때만 해당 상품 상세 이미지가 레이업팝업이 되면 되는데
현재는 8개의 기본이미지와 상품 상세이미지가 모두 로딩되었다가
상세버튼을 누르면 바로 화면에 레이어 팝업이 되고 있는거 같아요...
클릭시만 상품 상세 이미지 다운로딩이 가능한지?
</p><p><!DOCTYPE html></p><p><html></p><p><head></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><title> layer popup </title></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><script src="<a href="<a href="http://code.jquery.com/jquery-1.7.js" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-1.7.js</a>"><a href="http://code.jquery.com/jquery-1.7.js" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-1.7.js</a></a>" type="text/javascript"></script></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><script src="<a href="<a href="http://cfs.tistory.com/custom/blog/173/1736984/skin/images/jquery.bpopup.min.js" target="_blank" rel="noopener noreferrer">http://cfs.tistory.com/custom/blog/173/1736984/skin/images/jquery.bpopup.min.js</a>"><a href="http://cfs.tistory.com/custom/blog/173/1736984/skin/images/jquery.bpopup.min.js" target="_blank" rel="noopener noreferrer">http://cfs.tistory.com/custom/blog/173/1736984/skin/images/jquery.bpopup.min.js</a></a>" type="text/javascript"></script></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><script type="text/javascript"></p><p> <span class="Apple-tab-span" style="white-space:pre"> </span>function go_popup() {</p><p> <span class="Apple-tab-span" style="white-space:pre"> </span>$('#popup').bPopup();</p><p> <span class="Apple-tab-span" style="white-space:pre"> </span>};</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span></script></p><p> </p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span><style type="text/css"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>.Pstyle {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>opacity: 0;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>display: none;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>position: relative;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>width: auto;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>border: 5px solid #fff;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>padding: 20px;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>background-color: #fff;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>.Xclose{</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>position: absolute;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>right: 5px;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>top: 5px;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>padding: 5px;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>display: inline-block;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>cursor: pointer;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></style></p><p> </p><p></head></p><p> </p><p> </p><p><body></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><input type="button" value="상세" onclick="go_popup()"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div id="popup" class="Pstyle"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><span class="Xclose"> X</span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><div class="content" style="height:auto; width:auto;"></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>Layer popup OK
</p><p> <span class="Apple-tab-span" style="white-space:pre"> </span><p align="center"><img border="0" src="<a href="<a href="http://heabburnlee.cafe24.com/HTML/bodysuit-brand-story.jpg" target="_blank" rel="noopener noreferrer">http://heabburnlee.cafe24.com/HTML/bodysuit-brand-story.jpg</a>"><a href="http://heabburnlee.cafe24.com/HTML/bodysuit-brand-story.jpg" target="_blank" rel="noopener noreferrer">http://heabburnlee.cafe24.com/HTML/bodysuit-brand-story.jpg</a></a>"></p></p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span></div></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></div></p><p> </p><p></body></p><p></html></p><p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
10년 전
일단, 지금 쓰고 계시는 외부 플러그인 보다는 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를 이용하시구요
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인