내용에서 이미지사이즈에 따라 이미지새창 및 링크 나타내기 > 그누4 팁자료실

그누4 팁자료실

그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.

내용에서 이미지사이즈에 따라 이미지새창 및 링크 나타내기 정보

내용에서 이미지사이즈에 따라 이미지새창 및 링크 나타내기

본문

그누보드는 첨부파일 혹은 img 태그로 내용에 이미지가 삽입되면 항상 새창띄우기 링크가 나타납니다.

이것을 게시판설정의 사이즈보다 넓을때에만 새창을 띄우고, 작을 경우에는 클릭이 안되어 새창을 띄우지 않도록 변경하였습니다.

변경할 파일 2개

1. /bbs/view.php <= img 태그를 보여주는 부분

2. /lib/common.lib.php <= 첨부이미지가 보여지는 부분

view.php 파일에서 100라인쯤에 있는 아래의 소스를 찾습니다.

$view[content] = preg_replace("/(\<img )([^\>]*)(\>)/i", "\\1 name='target_resize_image[]' onclick='image_window(this)' style='cursor:pointer;' \\2 \\3", $view[content]);

이 내용을 아래처럼 변경하면 img 태그에서 이미지창이 강제로 생기는 것을 게시판설정의 이미지가로 사이즈에 비례하여 자동으로 조절됩니다.
태그로 삽입한 이미지의 가로사이즈가 게시판설정의 가로사이즈보다 넓으면 이미지새창을 띄우고 아닌 경우 새창링크를 제거합니다.

$img_new = $board[bo_image_width] - 2;
$view[content] = preg_replace("/(\<img )([^\>]*)(\>)/i", "\\1 name='target_resize_image[]' onMouseOver='if(this.width>$img_new){this.style.cursor=\"hand\"; this.title=\"원본보기\"};' onclick='if(this.width>$img_new){image_window(this)};' \\2 \\3", $view[content]);

-----

common.lib.php 파일에서 변경할부분은 두곳입니다.

1. 800라인쯤에 있는 아래의 내용을 찾아서 주석처리합니다.

//원본
if ($width > $board[bo_image_width] && $board[bo_image_width])
{
        $rate = $board[bo_image_width] / $width;
        $width = $board[bo_image_width];
        $height = (int)($height * $rate);
}

//사용안함
//원본
/*
if ($width > $board[bo_image_width] && $board[bo_image_width])
{
        $rate = $board[bo_image_width] / $width;
        $width = $board[bo_image_width];
        $height = (int)($height * $rate);
}
*/

2. 조금 아래 890라인쯤에 있는 아래의 내용을 찾아서 변경합니다.

//원본
if (preg_match("/\.($config[cf_image_extension])$/i", $file)) {
        // 이미지에 속성을 주지 않는 이유는 이미지 클릭시 원본 이미지를 보여주기 위한것임
        // 게시판설정 이미지보다 크다면 스킨의 자바스크립트에서 이미지를 줄여준다
        return "<img src='$g4[path]/data/file/$board[bo_table]/".urlencode($file)."' name='target_resize_image[]' onclick='image_window(this);' style='cursor:pointer;' title='$content'>";
    else if (preg_match("/\.($config[cf_flash_extension])$/i", $file))
        //return "<embed src='$g4[path]/data/file/$board[bo_table]/$file' $attr></embed>";
        return "<script>doc_write(flash_movie('$g4[path]/data/file/$board[bo_table]/$file', '_g4_{$ids}', '$width', '$height', 'transparent'));</script>";
    else if (preg_match("/\.($config[cf_movie_extension])$/i", $file))
        //return "<embed src='$g4[path]/data/file/$board[bo_table]/$file' $attr></embed>";
        return "<script>doc_write(obj_movie('$g4[path]/data/file/$board[bo_table]/$file', '_g4_{$ids}', '$width', '$height'));</script>";



//변경
if (preg_match("/\.($config[cf_image_extension])$/i", $file)) {
        // 이미지에 속성을 주지 않는 이유는 이미지 클릭시 원본 이미지를 보여주기 위한것임
        // 게시판설정 이미지보다 크다면 스킨의 자바스크립트에서 이미지를 줄여준다 

if($width > $board[bo_image_width]) {
return "<img src='$g4[path]/data/file/$board[bo_table]/".urlencode($file)."' name='target_resize_image[]' onclick='image_window(this);' style='cursor:pointer;' title='$content'>";
} else {
return "<img src='$g4[path]/data/file/$board[bo_table]/".urlencode($file)."' title='$content'>";
}

    }else if (preg_match("/\.($config[cf_flash_extension])$/i", $file))
        //return "<embed src='$g4[path]/data/file/$board[bo_table]/$file' $attr></embed>";
        return "<script>doc_write(flash_movie('$g4[path]/data/file/$board[bo_table]/$file', '_g4_{$ids}', '$width', '$height', 'transparent'));</script>";
    else if (preg_match("/\.($config[cf_movie_extension])$/i", $file))
        //return "<embed src='$g4[path]/data/file/$board[bo_table]/$file' $attr></embed>";
        return "<script>doc_write(obj_movie('$g4[path]/data/file/$board[bo_table]/$file', '_g4_{$ids}', '$width', '$height'));</script>";


위소스의 변경된 부분만
//원본
return "<img src='$g4[path]/data/file/$board[bo_table]/".urlencode($file)."' name='target_resize_image[]' onclick='image_window(this);' style='cursor:pointer;' title='$content'>";

//변경
if($width > $board[bo_image_width]) {
    return "<img src='$g4[path]/data/file/$board[bo_table]/".urlencode($file)."' name='target_resize_image[]' onclick='image_window(this);' style='cursor:pointer;' title='$content'>";
} else {
    return "<img src='$g4[path]/data/file/$board[bo_table]/".urlencode($file)."' title='$content'>";
}
추천
5

댓글 11개

음.. 저도 필요해서 찾다가 그냥 만들었는데, 여기 팁이 있었다니.. 허무하네요.

근데, 저는 조금 다른 방식입니다. ^^ 그냥 참고하시라 적어 봅니다.

저는 common.js 를 수정했습니다.

image_window함수내에서


if(!parseInt(w)) {
    w = img.width;
    h = img.height;
}

밑에 다음과 같이 적어줍니다.

if((parseInt(w) < 200) || (parseInt(h) < 200)) return;

width, height 가 해당 수치보다 작으면 창을 안 띄우게 하는 것입니다. 200라는 수치는 적당히 하시면 되겠습니다.

서로 장단점이 있겠네요. ^^

http://music.stnzone.com
전체 3,309 |RSS
그누4 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1402호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT