기본 뷰스킨 설정이
$(function() {
$("a.view_image").click(function() {
window.open(this.href, "large_image", "location=yes,links=no,toolbar=no,top=10,left=10,width=10,height=10,resizable=yes,scrollbars=no,status=no");
return false;
});
이렇게 되어있습니다.
이전에 질문글에 andor님께서 답변을 달아주셧는데
$(function() {
$("a.view_image").click(function() {
// 절대 고정 창
var win_w = 800;
var win_h = 600;
// 중앙 좌표 계산
var win_l = (window.screen.availWidth - win_w) / 2;
var win_t = (window.screen.availHeight - win_h) / 2;
// 팝업 옵션 (location, status 등을 꺼야 창 크기가 정확해집니다)
var settings = "width=" + win_w + ",height=" + win_h + ",top=" + win_t + ",left=" + win_l + ",resizable=no,scrollbars=no,status=no,toolbar=no,menubar=no,location=no";
var win = window.open(this.href, "large_image", settings);
if (win) {
win.onload = function() {
// 강제 방어 브라우저가 창을 키우지 못하게 다시 한번 800x600으로 리사이즈
win.resizeTo(win_w, win_h);
var doc = win.document;
var style = doc.createElement('style');
style.innerHTML = `
html, body {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
background: #000 !important;
overflow: hidden !important;
}
img {
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important; /* 비율 유지하며 창 안에 가두기 */
}
`;
doc.head.appendChild(style);
};
}
return false;
});
});
또는
$(function() {
$("a.view_image").click(function(e) {
// 기본 동작 차단 (표준 방식)
e.preventDefault();
// 1. 창 크기 및 위치 설정 (화면의 60% 비율)
var ratio = 0.6;
var win_w = screen.availWidth * ratio;
var win_h = screen.availHeight * ratio;
var win_l = (screen.availWidth - win_w) / 2;
var win_t = (screen.availHeight - win_h) / 2;
// 2. 팝업 옵션 보강
// 'popup' 속성은 최신 브라우저에서 새 탭으로 가는 것을 막는 가장 강력한 옵션입니다.
// 보안상 scrollbars는 yes로 두는 것이 팝업 차단을 피하기에 더 유리합니다.
var settings = "popup,width=" + win_w + ",height=" + win_h + ",top=" + win_t + ",left=" + win_l + ",resizable=yes,scrollbars=yes";
// 3. 팝업 창 열기
var win = window.open(this.href, "large_image", settings);
if (win) {
// 창이 열렸다면 포커스를 줍니다.
win.focus();
win.onload = function() {
var doc = win.document;
// 팝업 내부 이미지가 있는지 확인 후 스타일 적용
var targetImg = doc.getElementsByTagName('img')[0];
if (targetImg) {
var style = doc.createElement('style');
style.innerHTML = `
html, body {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
background: #000 !important;
overflow: hidden !important;
display: flex !important;
align-items: center;
justify-content: center;
}
img {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important; /* 이미지 비율 유지하며 꽉 채움 */
cursor: pointer;
}
`;
doc.head.appendChild(style);
// 이미지 클릭 시 창 닫기
targetImg.onclick = function() {
win.close();
};
}
};
} else {
// 팝업이 차단된 경우 안내 (안 보일 수 있음)
alert("팝업 차단 설정을 확인해 주세요.");
}
return false;
});
});
이렇게 팝업강조까지 해주셧는데. 실제 적용시 팝업이 아니라 새탭으로 이동해서 이미지가 뜹니다.
질문게시판을 아무리 찾아봐도 제가 못찾는건지 모르겠습니다만,
혹시 이런 경우 어떤 이유인지 아시는분 계실까요?
브라우저 설정 문제라고 보기에는 andor님께서 예시를 들어주신
https://ysmoto.kr/ys2/bbs/board.php?bo_table=basicpt
에서 예시 이미지 클릭시에는 정상적으로 팝업이 뜹니다.
view.skin.php 말고 다른 무언가를 건드려야 하는건지...
$(function() {
$("a.view_image").click(function() {
window.open(this.href, "large_image", "location=yes,links=no,toolbar=no,top=10,left=10,width=10,height=10,resizable=yes,scrollbars=no,status=no");
return false;
});
이렇게 되어있습니다.
이전에 질문글에 andor님께서 답변을 달아주셧는데
$(function() {
$("a.view_image").click(function() {
// 절대 고정 창
var win_w = 800;
var win_h = 600;
// 중앙 좌표 계산
var win_l = (window.screen.availWidth - win_w) / 2;
var win_t = (window.screen.availHeight - win_h) / 2;
// 팝업 옵션 (location, status 등을 꺼야 창 크기가 정확해집니다)
var settings = "width=" + win_w + ",height=" + win_h + ",top=" + win_t + ",left=" + win_l + ",resizable=no,scrollbars=no,status=no,toolbar=no,menubar=no,location=no";
var win = window.open(this.href, "large_image", settings);
if (win) {
win.onload = function() {
// 강제 방어 브라우저가 창을 키우지 못하게 다시 한번 800x600으로 리사이즈
win.resizeTo(win_w, win_h);
var doc = win.document;
var style = doc.createElement('style');
style.innerHTML = `
html, body {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
background: #000 !important;
overflow: hidden !important;
}
img {
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important; /* 비율 유지하며 창 안에 가두기 */
}
`;
doc.head.appendChild(style);
};
}
return false;
});
});
또는
$(function() {
$("a.view_image").click(function(e) {
// 기본 동작 차단 (표준 방식)
e.preventDefault();
// 1. 창 크기 및 위치 설정 (화면의 60% 비율)
var ratio = 0.6;
var win_w = screen.availWidth * ratio;
var win_h = screen.availHeight * ratio;
var win_l = (screen.availWidth - win_w) / 2;
var win_t = (screen.availHeight - win_h) / 2;
// 2. 팝업 옵션 보강
// 'popup' 속성은 최신 브라우저에서 새 탭으로 가는 것을 막는 가장 강력한 옵션입니다.
// 보안상 scrollbars는 yes로 두는 것이 팝업 차단을 피하기에 더 유리합니다.
var settings = "popup,width=" + win_w + ",height=" + win_h + ",top=" + win_t + ",left=" + win_l + ",resizable=yes,scrollbars=yes";
// 3. 팝업 창 열기
var win = window.open(this.href, "large_image", settings);
if (win) {
// 창이 열렸다면 포커스를 줍니다.
win.focus();
win.onload = function() {
var doc = win.document;
// 팝업 내부 이미지가 있는지 확인 후 스타일 적용
var targetImg = doc.getElementsByTagName('img')[0];
if (targetImg) {
var style = doc.createElement('style');
style.innerHTML = `
html, body {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
height: 100% !important;
background: #000 !important;
overflow: hidden !important;
display: flex !important;
align-items: center;
justify-content: center;
}
img {
max-width: 100% !important;
max-height: 100% !important;
width: auto !important;
height: auto !important;
object-fit: contain !important; /* 이미지 비율 유지하며 꽉 채움 */
cursor: pointer;
}
`;
doc.head.appendChild(style);
// 이미지 클릭 시 창 닫기
targetImg.onclick = function() {
win.close();
};
}
};
} else {
// 팝업이 차단된 경우 안내 (안 보일 수 있음)
alert("팝업 차단 설정을 확인해 주세요.");
}
return false;
});
});
이렇게 팝업강조까지 해주셧는데. 실제 적용시 팝업이 아니라 새탭으로 이동해서 이미지가 뜹니다.
질문게시판을 아무리 찾아봐도 제가 못찾는건지 모르겠습니다만,
혹시 이런 경우 어떤 이유인지 아시는분 계실까요?
브라우저 설정 문제라고 보기에는 andor님께서 예시를 들어주신
https://ysmoto.kr/ys2/bbs/board.php?bo_table=basicpt
에서 예시 이미지 클릭시에는 정상적으로 팝업이 뜹니다.
view.skin.php 말고 다른 무언가를 건드려야 하는건지...
답변 3개 / 댓글 23개
채택된 답변
+20 포인트
기존거 지우시고 ....
최 하단부에 .... 제일 아래 입니다.
좀전에 다시 수정한 겁니다. 재차 해보세요.
팝업 되시는듯 ....
<script>
$(function() {
$(document).off("click", "a.view_image").on("click", "a.view_image", function(e) {
e.preventDefault();
e.stopImmediatePropagation();
// 1. 일단 작은 창으로 열기
var win = window.open(this.href, "_blank", "popup=yes,width=100,height=100,resizable=yes,scrollbars=no");
if (win) {
win.onload = function() {
var doc = win.document;
var img = doc.getElementsByTagName('img')[0];
if (img) {
// 2. 이미지 원본 크기 확인
var img_w = img.naturalWidth;
var img_h = img.naturalHeight;
// 3. [핵심] 화면 크기의 90%를 최대치로 설정 (이보다 커지지 않음)
var max_w = window.screen.availWidth * 0.9;
var max_h = window.screen.availHeight * 0.9;
var final_w = img_w;
var final_h = img_h;
// 원본이 최대치보다 크면 비율에 맞춰 축소 계산
if (img_w > max_w || img_h > max_h) {
var ratio = Math.min(max_w / img_w, max_h / img_h);
final_w = img_w * ratio;
final_h = img_h * ratio;
}
// 4. 창 크기를 계산된 값으로 변경 (여백 고려 +40)
win.resizeTo(final_w, final_h + 60);
// 5. 중앙 정렬
var l = (window.screen.availWidth - final_w) / 2;
var t = (window.screen.availHeight - final_h) / 2;
win.moveTo(l, t);
// 6. 이미지 가두기 스타일
var style = doc.createElement('style');
style.innerHTML = `
html, body {
margin: 0; padding: 0; background: #000;
overflow: hidden; width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
}
img {
/* 창보다 큰 이미지는 창 크기에 맞춰 자동 축소 */
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
cursor: pointer;
}
`;
doc.head.appendChild(style);
img.onclick = function() { win.close(); };
}
};
}
return false;
});
});
</script>
넣어 보세요. 현재 적용중.
최 하단부에 .... 제일 아래 입니다.
좀전에 다시 수정한 겁니다. 재차 해보세요.
팝업 되시는듯 ....
<script>
$(function() {
$(document).off("click", "a.view_image").on("click", "a.view_image", function(e) {
e.preventDefault();
e.stopImmediatePropagation();
// 1. 일단 작은 창으로 열기
var win = window.open(this.href, "_blank", "popup=yes,width=100,height=100,resizable=yes,scrollbars=no");
if (win) {
win.onload = function() {
var doc = win.document;
var img = doc.getElementsByTagName('img')[0];
if (img) {
// 2. 이미지 원본 크기 확인
var img_w = img.naturalWidth;
var img_h = img.naturalHeight;
// 3. [핵심] 화면 크기의 90%를 최대치로 설정 (이보다 커지지 않음)
var max_w = window.screen.availWidth * 0.9;
var max_h = window.screen.availHeight * 0.9;
var final_w = img_w;
var final_h = img_h;
// 원본이 최대치보다 크면 비율에 맞춰 축소 계산
if (img_w > max_w || img_h > max_h) {
var ratio = Math.min(max_w / img_w, max_h / img_h);
final_w = img_w * ratio;
final_h = img_h * ratio;
}
// 4. 창 크기를 계산된 값으로 변경 (여백 고려 +40)
win.resizeTo(final_w, final_h + 60);
// 5. 중앙 정렬
var l = (window.screen.availWidth - final_w) / 2;
var t = (window.screen.availHeight - final_h) / 2;
win.moveTo(l, t);
// 6. 이미지 가두기 스타일
var style = doc.createElement('style');
style.innerHTML = `
html, body {
margin: 0; padding: 0; background: #000;
overflow: hidden; width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
}
img {
/* 창보다 큰 이미지는 창 크기에 맞춰 자동 축소 */
max-width: 100% !important;
max-height: 100% !important;
object-fit: contain !important;
cursor: pointer;
}
`;
doc.head.appendChild(style);
img.onclick = function() { win.close(); };
}
};
}
return false;
});
});
</script>
넣어 보세요. 현재 적용중.
답변에 대한 댓글 22개
감사합니다 감사합니다 감사합니다 감사합니다 정말 정말 정말 정말 수십번 수백번 감사합니다.
며칠간 고생 정말 많으셧습니다 .
답답한 마음에 원본인
$(function() {
$("a.view_image").click(function() {
window.open(this.href, "large_image", "location=yes,links=no,toolbar=no,top=10,left=10,width=10,height=10,resizable=yes,scrollbars=no,status=no");
return false;
});
이부분을 지우고, 이 원본의 스크립트 시작과 앞의 스크립트 사이에 추가해서 넣으니깐
원하던대로 팝업창으로 실행됩니다.
끝부분에 넣었을때는 계속 새탭이다가, 중간에 때려박으니 해결되었습니다.
정말 정말 너무 너무 감사합니다. 어흙흙흙.
다른 사람들에게도 물어보고 새창으로 뜨는지 한번 더 확인해보겠습니다. ㅠㅠ
복 받으시고 만수무강 하십시요 ㅠㅠ!!!
혹시, 사진을 처음 클릭하면 처음에는 큰 화면으로 뜨고 닫았다가 다시 클릭하면 사이즈가 줄여서 나오는데
이건 지연시간 넣어주신거랑 관련 있을까요?
며칠간 고생 정말 많으셧습니다 .
답답한 마음에 원본인
$(function() {
$("a.view_image").click(function() {
window.open(this.href, "large_image", "location=yes,links=no,toolbar=no,top=10,left=10,width=10,height=10,resizable=yes,scrollbars=no,status=no");
return false;
});
이부분을 지우고, 이 원본의 스크립트 시작과 앞의 스크립트 사이에 추가해서 넣으니깐
원하던대로 팝업창으로 실행됩니다.
끝부분에 넣었을때는 계속 새탭이다가, 중간에 때려박으니 해결되었습니다.
정말 정말 너무 너무 감사합니다. 어흙흙흙.
다른 사람들에게도 물어보고 새창으로 뜨는지 한번 더 확인해보겠습니다. ㅠㅠ
복 받으시고 만수무강 하십시요 ㅠㅠ!!!
혹시, 사진을 처음 클릭하면 처음에는 큰 화면으로 뜨고 닫았다가 다시 클릭하면 사이즈가 줄여서 나오는데
이건 지연시간 넣어주신거랑 관련 있을까요?
네 한번더 위치를 상단으로 더 이동시키고
img.onclick = function() { win.close(); };
}
}, 500); // 0.2초 대기 후 크기 조절
}
return false;
});
});
</script>
원래 200이었던 수치를 500으로 수정후 앤드오알님 말씀처럼 커졌다가 작아졌습니다.
처음에는 큰창으로 뜨고 그걸 끈 뒤에 다시 켜야 작아졌는데,
혼자 이것저것 만져보다가 된거 같습니다.
저 수치의 200이나 500은 어떤 부분의 수치였을까요?
일단 최종적으로 해결은 했습니다. 정말 감사드립니다. ^^
img.onclick = function() { win.close(); };
}
}, 500); // 0.2초 대기 후 크기 조절
}
return false;
});
});
</script>
원래 200이었던 수치를 500으로 수정후 앤드오알님 말씀처럼 커졌다가 작아졌습니다.
처음에는 큰창으로 뜨고 그걸 끈 뒤에 다시 켜야 작아졌는데,
혼자 이것저것 만져보다가 된거 같습니다.
저 수치의 200이나 500은 어떤 부분의 수치였을까요?
일단 최종적으로 해결은 했습니다. 정말 감사드립니다. ^^
현재 팝업 으로 보여 지시는데 .... 본인 PC 에서만 .... 새탭 으로
열린다는 말씀 이신가요???
답변을 작성하려면 로그인이 필요합니다.
<!-- 첨부파일 시작 { -->
<section id="bo_v_file">
<h2>첨부파일</h2>
<ul>
<?php
// 가변 파일
for ($i=0; $i<count($view['file']); $i++) {
if (isset($view['file'][$i]['source']) && $view['file'][$i]['source'] && !$view['file'][$i]['view']) {
?>
<li>
<i class="fa fa-download" aria-hidden="true"></i>
<a href="<?php echo $view['file'][$i]['href']; ?>" class="view_file_download">
<strong><?php echo $view['file'][$i]['source'] ?></strong>
</a>
<?php echo $view['file'][$i]['content'] ?> (<?php echo $view['file'][$i]['size'] ?>)
<span class="bo_v_file_cnt"><?php echo $view['file'][$i]['download'] ?>회 다운로드 | DATE : <?php echo $view['file'][$i]['datetime'] ?></span>
</li>
<?php
}
}
?>
</ul>
</section>
<!-- } 첨부파일 끝 --> 여기에 문제가?