갤러리 게시판 뷰에 나오는 사진을 인쇄하는 방법좀 알려주세요
본문
일단 사진을 보시게되면 빨간 부분을 클릭시 인쇄만 되게 만들려고 합니다. 문제는 view.shik.php 에 소스가...
<section id="bo_v_atc">
<h2 id="bo_v_atc_title">본문</h2>
<?php
// 파일 출력
$v_img_count = count($view['file']);
if($v_img_count) {
echo "<div id=\"bo_v_img\">\n";
for ($i=0; $i<=count($view['file']); $i++) {
if ($view['file'][$i]['view']) {
//echo $view['file'][$i]['view'];
echo get_view_thumbnail($view['file'][$i]['view']);
}
}
echo "</div>\n";
}
?>
출력 소스는 div를 잡아서 출력 하는 방법을 알고 있습니다. 출처 http://blog.naver.com/jungjinyee/80133522496<< 어떤분 인지는 모르겠으나 보고 적용을 시킬라고 하는데 어디부터 손대야 할지 애매 합니다. 쿼리로 되어 있어서 조금만 도와 주시면 감사하겠습니다.
답변 4
js설명해드릴께요.
<script type="text/javascript">
<!--
var initBody; // 바디의 내용을 저장하려고 만든 저장소에요.
// 프린트를 작동하기 직전
function beforePrint() {
// boxes라는 변수안에 현재 도큐먼트>바디에있는 html을 저장시키는거에요.
boxes = document.body.innerHTML;
// 도큐먼트 > 바디에 box의 html을 채워넣는거에요.
document.body.innerHTML = box.innerHTML;
}
// 프린트를 작동하고 난 이후
function afferPrint() {
// boxes변수에 저장해놓은 html을 도큐먼트 > 바디에 채워넣는거에요.
document.body.innerHTML = boxes;
}
function printArea() {
// 이거는 a태그에 걸어놓은 프린트하는거에요.
window.print();
}
// 여기에서 window.onbeforeprint 는 js의 window.print를 하기 직전에 작동하게 하려고 한거구요.
// beforePrint펑션을 프린트하기 직전에 작동시키겠다는거에요.
window.onbeforeprint = beforePrint;
// 여기에서 window.onafferprint는 js의 window.print를 하고난 이후에 작동하게 하는거고요
// afterPrint펑션을 프린트하고난 직후에 작동시키겠다는거에요.
window.onafferprint = afterPrint;
-->
</script>
소스만 봐서는 확실히 작동하는지는 잘 모르겠네요;; 빠진게 있는건지 잘못 쓴건지...
제가 살짝 수정했어요.
바꾼건 initBody라는 변수를 만들어두고 boxes라는 변수에 넣는게 이상해서 바꾸었고요. 프린트 이후에 바디에 넣고 나면 initBody를 널로 초기화해줬고요. 웹디구야님 소스에 프린트할영역이 bo_v_img로 되어있으신거 같아서 box를 수정했어요. 그리고 box.innnerHTML이게 아이디 바로 검색되는건지 안되는건지 몰라서 프린트할 영역을 아이디로 검색하게 했어요.
<script type="text/javascript">
var initBody;
function beforePrint() {
initBody= document.body.innerHTML;
document.body.innerHTML = document.getElementById("bo_v_img").innerHTML;
}
function afferPrint() {
document.body.innerHTML = initBody;
initBody = null;
}
function printArea() {
window.print();
}
window.onbeforeprint = beforePrint;
window.onafferprint = afterPrint;
</script>
드래곤님 소스 감사합니다 ㅠㅠ 다만 문제가 있었네요. <div id=\"bo_v_img\"> 이 놈의 안을 클릭해보니 미리보기가 자꾸 뜨더라구요 알고보니 이놈이 /bbs/view_img.php 이놈을 끌고 오더군요..... 안에 내용을 살펴보니 뭔내용인지 잘 모르겠어서 아는 지인한테 물어보니 미리보기 소스로 구성이 되어 있다고 하더군요.... 이거 작업 하려면 쉽지 않다고 하네요 ㅠㅠ 답변은 감사합니다 ㅠㅠ
그누보드 5.0.35버전 기준이에요(제가 가지고 있는 소스의 config.php에 적힌 버전)
/skin/board/basic/view.skin.php - get_view_thumbnail펑션 > /lib/thumbnail.lib.php 의 76라인이에요.
여기서 아래쪽보시면 '$thumb_tag = ' 로 시작해서 a태그안에 위에서 정해준 이미지추가해서 넣어주고 있어요.
a태그에 있는게 확대해서보기인데요.
확대해서 보기 안하시려면 href에 있는내용을 지워주시고요. 여기에 프린트하는 펑션을 넣어주시면되요.
아이디 형식으로 하면 이미지가 여러개일때는 겹치는 문제가 발생하니깐 클래스로 바꿀께요.
/lib/thumbnail.lib.php 안에 수정
// 기존에 있는 확대해서보기 링크를 지우고 클래스를 겹치지않게 추가했어요.
// 해당 소스는 for문에 돌고 있어서 for문 도는 i값으로 했어요.
$thumb_tag = '<a href="'.G5_BBS_URL.'/view_image.php?fn='.urlencode($imgurl).'" target="_blank" class="view_image">'.$thumb_tag.'</a>';
$thumb_tag = '<a href="#" target="_blank" class="view_image print_img'+$i+'" onclick="printArea(this.className);">'.$thumb_tag.'</a>';
스크립트수정
<script>
var initBody
,target;
function beforePrint() {
initBody= document.body.innerHTML;
document.body.innerHTML = document.getElementByClassName(target).innerHTML;
}
function afterPrint() {
document.body.innerHTML = initBody;
initBody = target = null;
}
function printArea(e) {
target = e;
window.print();
}
window.onbeforeprint = beforePrint;
window.onafferprint = afterPrint;</script>질문이요 혹시 skin/board/gallery/view.skin.php 부분에
function board_move(href)
{
window.open(href, "boardmove", "left=50, top=50, width=500, height=550, scrollbars=1");
}
</script>
<script>
$(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;
});
문제가 이부분때문인지는 모르겠는데 소스 적용해도 블링크 타겟이 잡히면서 미리보기가 뜨네요 이부분은 날려야 되나요?
아 저는 그누보드 5.1.4 버전이긴 하지만 드래곤님 버전하고는 별차이는 모르겠네요 ㅎㅎ....
될것도 같긴한데 미리보기 소스가 계속 적용이 되네요ㅋ 조금만 더 알려 주시만 감사하겠습니다 ㅠㅠ
넹 아래에 $("a.view_image").click(function() { 이게 이미지를 새창에 띄우는 거네요.
이걸 주석처리 해주시거나 제가 적어드린 소스에 /lib/thumbnail.lib.php여기에서요.
$thumb_tag = '<a href="#" target="_blank" class="view_image print_img'+$i+'" onclick="printArea(this.className);">'.$thumb_tag.'</a>';
여기에 class명중 view_image를 지워주시면 될거같아요.
클래스에 css에 들어있을수도 있으니 $("a.view_image").click(function() { 이거를 주석처리 해주시는게 좋을거같아요~
이놈의 미리보기 끈질기네요...... 주석 처리해놓고 보니 블링크되면서 옆에 창에 딱 뜨네요
ㅡ,.ㅡ;;;;;; 어디선가 이놈을 또 끌고 오는게 있나봐요 ㅋ
function board_move(href)
{
window.open(href, "boardmove", "left=50, top=50, width=500, height=550, scrollbars=1");
}
혹시나해서 이부분 에 안가지 주석 처리 했는데도 옆에 떡하니 뜨네요 ㅋ
새창에 빈공간이 뜨는건 return false;이거를 빼먹고 안넣었네요 ㅎㅎ
펑션삽입후 리턴펠스 넣어줘야 a태그가 작동이 안해요.
그런데 다른데에서 불러올수도 있으니깐요 view_image라는 클래스를 빼시고 a태그도 빼시는게 정신건강에 좋으실거같아요 ㅎㅎ
/lib/thumbnail.lib.php에서 158번째줄부터요
// 썸네일 생성
if(!$is_animated)
$thumb_file = thumbnail($filename, $filepath, $filepath, $thumb_width, $thumb_height, false);
else
$thumb_file = $filename;
if(!$thumb_file)
continue;
if ($width) {
$thumb_tag = '<img src="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'" width="'.$width.'" height="'.$height.'"/>';
} else {
$thumb_tag = '<img src="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'"/>';
}
// $img_tag에 editor 경로가 있으면 원본보기 링크 추가
$img_tag = $matches[0][$i];
if(strpos($img_tag, G5_DATA_DIR.'/'.G5_EDITOR_DIR) && preg_match("/\.({$config['cf_image_extension']})$/i", $filename)) {
$imgurl = str_replace(G5_URL, "", $src);
$thumb_tag = '<a href="'.G5_BBS_URL.'/view_image.php?fn='.urlencode($imgurl).'" target="_blank" class="view_image">'.$thumb_tag.'</a>';
}
아래롤 바꺼주세요.
// 썸네일 생성
if(!$is_animated)
$thumb_file = thumbnail($filename, $filepath, $filepath, $thumb_width, $thumb_height, false);
else
$thumb_file = $filename;
if(!$thumb_file)
continue;
if ($width) {
$thumb_tag = '<img src="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'" width="'.$width.'" height="'.$height.'" class="print_img'+$i+'" onclick="printArea(this.className);" />';
} else {
$thumb_tag = '<img src="'.G5_URL.str_replace($filename, $thumb_file, $data_path).'" alt="'.$alt.'" class="print_img'+$i+'" onclick="printArea(this.className);" />';
}
// $img_tag에 editor 경로가 있으면 원본보기 링크 추가
$img_tag = $matches[0][$i];
a태그가 삽입되는걸 삭제하고 펑션작동과 클래스추가를 img태그로 옮긴거에요.