내용에서 이미지사이즈에 따라 이미지새창 및 링크 나타내기 정보
내용에서 이미지사이즈에 따라 이미지새창 및 링크 나타내기
본문
그누보드는 첨부파일 혹은 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'>";
}
이것을 게시판설정의 사이즈보다 넓을때에만 새창을 띄우고, 작을 경우에는 클릭이 안되어 새창을 띄우지 않도록 변경하였습니다.
변경할 파일 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
5
댓글 11개

유용하게 사용하겠습니다
감사합니다
감사합니다

좋은 자료 감사합니다.
좋은 팁 감사합니다.
필요하다고 생각하고 있었는데...
필요하다고 생각하고 있었는데...
..
/common/common.lib.php 가 아니라
/lib/common.lib.php 였군요^^;;
잘 쓰겠습니다~~
/lib/common.lib.php 였군요^^;;
잘 쓰겠습니다~~

음.. 저도 필요해서 찾다가 그냥 만들었는데, 여기 팁이 있었다니.. 허무하네요.
근데, 저는 조금 다른 방식입니다. ^^ 그냥 참고하시라 적어 봅니다.
저는 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
근데, 저는 조금 다른 방식입니다. ^^ 그냥 참고하시라 적어 봅니다.
저는 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
두 분의 팁 모두 유용하게 잘 사용하였습니다.
감사합니다!
감사합니다!

아주 유용한 팁입니다.
꼭필요했는데, 감사합니다.

view.php에서 몇일 고생했는데 팁이 있었다니 참 허무하네요 ^^
감사합니다.
이미지 팝업창 제어하기~~
감사합니다.
이미지 팝업창 제어하기~~
너무 너무 감사합니다. 잘 사용했습니다.