팝업 이미지 클릭시 팝업창 닫기 기능 구현 요청 드립니다.
본문
원페이지 형식의 홈페이지를 작성중입니다. 저는 15년 전에 취미로 태그 좀 만지고(?) 홈페이지를 만들어본 적이 있지만... 완전 초보라고 보시면 됩니다. ㅠㅠ
그누보드와 인터넷 검색으로 여차저차 만들어지고 있습니다.
아래와 같은 소스를 구했었는데
갤러리 게시판의 파일을 추출해와서 팝업으로 띄웁니다. 화면에 크게 보이는 이미지가 있고 아래에 리스트가 있습니다. 그리고 닫기 버튼 이미지가 있지요.
원하는 기능은, 닫기 버튼을 클릭하는 것이 아니라 큰 이미지를 클릭했을 때 화면을 닫기(블럭처리) 하는 것입니다. 물론 이미지 리스트를 클릭했을 땐 그 이미지가 크게 보여야 하구요(슬라이드 기능)
연말에 바쁘시겠지만 어떻게 수정하면 될지 조언 부탁드립니다.
<script>
$(function(){
/*
$(document).on("mousewheel.disableScroll DOMMouseScroll.disableScroll touchmove.disableScroll", function(e) {
e.preventDefault();
return;
});
$(document).on("keydown.disableScroll", function(e) {
var eventKeyArray = [32, 33, 34, 35, 36, 37, 38, 39, 40];
for (var i = 0; i < eventKeyArray.length; i++) {
if (e.keyCode === eventKeyArray [i]) {
e.preventDefault();
return;
}
}
});
*/
$("#bo_gall .gall_li").slice(0, 9).show(); // select the first ten
$(".more").click(function(e){ // click event for load more
e.preventDefault();
$("#bo_gall .gall_li:hidden").slice(0, 3).slideDown(1000); // select next 10 hidden divs and show them
if($("#bo_gall .gall_li:hidden").length == 0){ // check if any hidden divs still exist
alert("더이상 이미지가 없습니다."); // alert if there are none left
}
});
$(window).resize();
$('#view_gallery .close').css({
'cursor':'pointer'
}).on('click', function() {
$('#view_gallery > .content').html('');
$('#view_gallery').css('display', 'none');
});
$(document).on('click', '#view_gallery > .content > .view_image_list > li', function() {
var img = $(this).attr('view');
$('#view_gallery > .content > .view_image').html(img);
});
});
$(window).resize(function(){
$('.content').css({position:'absolute'}).css({//$('.content').outerWidth(true)) / 2, $('.content').outerHeight(true)) / 2
left: ($(window).width() - 800) / 2,
top: ($(window).height() - 850) / 2
});
$('.close').css({position:'absolute'}).css({//$('.content').outerWidth(true)) / 2, $('.content').outerHeight(true)) / 2
left: ($(window).width() + 800) / 2,
top: ($(window).height() - 895) / 2
});
});
function view(bo_table, wr_id){
$.ajax({
url: g5_url+"/theme/sedam0/main/view_gallery.php",
type: "POST",
data: {'bo_table' : bo_table, 'wr_id' : wr_id},
dataType: "text",
error : function(request, status, error){
var msg = "code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error;
msg += "\n\n현재 오류입니다.\n위 내용을 알려주시면 됩니다.";
alert(msg);
$('.wrap-loading').addClass('display-none');
},success: function(data) {
$('#view_gallery').css('display', 'block');
$('#view_gallery > .content').html(data);
$('.wrap-loading').addClass('display-none');
},beforeSend:function(){
$('.wrap-loading').removeClass('display-none');
}
});
}
</script>
<div id="view_gallery">
<div class="close" style='z-index:1010;'><img src='<?php echo G5_THEME_URL; ?>/images/view_image_close.png'></div>
<div class="content" style='display:inline-block; height:583px; margin:0 auto; width:750px;'>
</div>
</div>
답변 2
$('.content>.view_image').click(function() { $('.close').click(); });
이러면 되지 않을까요 ;;;
$('#view_gallery .content').on('click', function() {
$('#view_gallery > .content').html('');
$('#view_gallery').css('display', 'none');
});
답변을 작성하시기 전에 로그인 해주세요.
