게시판에 이미지 게시판 폭보다 큰사이즈의 이미지만 클릭되게하기
게시판에 이미지를 업로드 하면 큰것이나 작은것이나 모두 클릭이 되어 원본사이즈로 보기가 나옵니다만.. 큰이미지는 괜찮지만 작은이미지 같은 경우엔 실질적으로 그 기능이 필요 없습니다. 그래서 작은 사이즈이미지는 그것이 안되게 하는겁니다.
검색해봐도 안나오는거 같아 간단히 수정해 보았습니다..
수정되는 부분은 빨간글씨로 처리했습니다.
------------------------------------------------------------------------------------
js/board.js
var view_big_img = 0;
//맨 첫째줄에 자바스크립트 전역변수를 선언해 줍니다. 큰이미지 보기를 위한 변수입니다.
function resizeBoardImage(imageWidth, borderColor) {
var target = document.getElementsByName('target_resize_image[]');
var imageHeight = 0;
if (target) {
for(i=0; i
target[i].tmp_width = target[i].width;
target[i].tmp_height = target[i].height;
// 이미지 폭이 테이블 폭보다 크다면 테이블폭에 맞춘다
if(target[i].width > imageWidth) {
imageHeight = parseFloat(target[i].width / target[i].height)
target[i].width = imageWidth;
target[i].height = parseInt(imageWidth / imageHeight);
target[i].style.cursor = 'pointer'; //그림의 너비가 테이블보다 크면 커서가 손가락모양이 됩니다. 이번 업데이트에서 바뀐부분입니다.
view_big_img = 1; //그림의 너비가 테이블보다 큰것은 이 변수를 1로 해줍니다.
// 스타일에 적용된 이미지의 폭과 높이를 삭제한다
target[i].style.width = '';
target[i].style.height = '';
}
if (borderColor) {
target[i].style.borderWidth = '1px';
target[i].style.borderStyle = 'solid';
target[i].style.borderColor = borderColor;
}
}
}
}
------------------------------------------------------------------------------------
js/common.js
L189
function image_window(img)
{
if (view_big_img == 1) {
// 아까 정해준 변수가 1일때만 이 기능이 작동하도록 합니다.
var w = img.tmp_width;
var h = img.tmp_height;
var winl = (screen.width-w)/2;
var wint = (screen.height-h)/3;
if (w >= screen.width) {
winl = 0;
h = (parseInt)(w * (h / w));
}
.
.
.
.
.
.
if(parseInt(navigator.appVersion) >= 4){win.window.focus();}
} else return 0;
//if를 닫아주고 변수가 1이 아니라면 0을 리턴하도록 합니다.
}
------------------------------------------------------------------------------------
알아먹기 어렵게 쭉 쓴거 같지만 자바스크립트를 조금이라도 아시는 분은 이해가 가실거라 믿습니다.
덧붙여 lib/common.lib.php파일 899번째 줄쯤에 이미지 출력관련 코드가 있는데 거기에서
style='cursor:pointer;'
이 부분을 삭제해 주시면 작은 이미지에는 일반 포인터가 큰 이미지에서는 손가락 모양의 포인터가 나타나게 됩니다.
검색해봐도 안나오는거 같아 간단히 수정해 보았습니다..
수정되는 부분은 빨간글씨로 처리했습니다.
------------------------------------------------------------------------------------
js/board.js
var view_big_img = 0;
//맨 첫째줄에 자바스크립트 전역변수를 선언해 줍니다. 큰이미지 보기를 위한 변수입니다.
function resizeBoardImage(imageWidth, borderColor) {
var target = document.getElementsByName('target_resize_image[]');
var imageHeight = 0;
if (target) {
for(i=0; i
target[i].tmp_width = target[i].width;
target[i].tmp_height = target[i].height;
// 이미지 폭이 테이블 폭보다 크다면 테이블폭에 맞춘다
if(target[i].width > imageWidth) {
imageHeight = parseFloat(target[i].width / target[i].height)
target[i].width = imageWidth;
target[i].height = parseInt(imageWidth / imageHeight);
target[i].style.cursor = 'pointer'; //그림의 너비가 테이블보다 크면 커서가 손가락모양이 됩니다. 이번 업데이트에서 바뀐부분입니다.
view_big_img = 1; //그림의 너비가 테이블보다 큰것은 이 변수를 1로 해줍니다.
// 스타일에 적용된 이미지의 폭과 높이를 삭제한다
target[i].style.width = '';
target[i].style.height = '';
}
if (borderColor) {
target[i].style.borderWidth = '1px';
target[i].style.borderStyle = 'solid';
target[i].style.borderColor = borderColor;
}
}
}
}
------------------------------------------------------------------------------------
js/common.js
L189
function image_window(img)
{
if (view_big_img == 1) {
// 아까 정해준 변수가 1일때만 이 기능이 작동하도록 합니다.
var w = img.tmp_width;
var h = img.tmp_height;
var winl = (screen.width-w)/2;
var wint = (screen.height-h)/3;
if (w >= screen.width) {
winl = 0;
h = (parseInt)(w * (h / w));
}
.
.
.
.
.
.
if(parseInt(navigator.appVersion) >= 4){win.window.focus();}
} else return 0;
//if를 닫아주고 변수가 1이 아니라면 0을 리턴하도록 합니다.
}
------------------------------------------------------------------------------------
알아먹기 어렵게 쭉 쓴거 같지만 자바스크립트를 조금이라도 아시는 분은 이해가 가실거라 믿습니다.
덧붙여 lib/common.lib.php파일 899번째 줄쯤에 이미지 출력관련 코드가 있는데 거기에서
style='cursor:pointer;'
이 부분을 삭제해 주시면 작은 이미지에는 일반 포인터가 큰 이미지에서는 손가락 모양의 포인터가 나타나게 됩니다.
댓글 5개
포천초등학교
17년 전
스크랩해갑니다 (__)
17년 전
굳이네요
16년 전
좋은 팁이네요 ^^
16년 전
전체 이미지에 아예 커서모양이 나오지 않는다는...
13년 전
화일 하나만 수정하믄 되는 다른방법 입니다.
lib/common.lib.php 932줄 에서 다음의 "라인 추가 시작 ~ 끝" 부분을 삽입하시고
// 파일의 폭이 게시판설정의 이미지폭 보다 크다면 게시판설정 폭으로 맞추고 비율에 따라 높이를 계산
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);
// 라인추가 시작 //////////////////////////////
$big_img = "onclick='image_window(this);' style='cursor:pointer;";
} else {
$big_img = "";
// 라인 추가 끝 ///////////////////////////////
}
하시고 그 아래..
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'>";
이 부분에서
onclick='image_window(this);' style='cursor:pointer;' 요것을 {$big_img} 로 대체하믄 되던데요.
다음과 같이....
수정된 구문 /////////////
return "<img src='$g4[path]/data/file/$board[bo_table]/".urlencode($file)."' name='target_resize_image[]' {$big_img} title='$content'>";
lib/common.lib.php 932줄 에서 다음의 "라인 추가 시작 ~ 끝" 부분을 삽입하시고
// 파일의 폭이 게시판설정의 이미지폭 보다 크다면 게시판설정 폭으로 맞추고 비율에 따라 높이를 계산
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);
// 라인추가 시작 //////////////////////////////
$big_img = "onclick='image_window(this);' style='cursor:pointer;";
} else {
$big_img = "";
// 라인 추가 끝 ///////////////////////////////
}
하시고 그 아래..
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'>";
이 부분에서
onclick='image_window(this);' style='cursor:pointer;' 요것을 {$big_img} 로 대체하믄 되던데요.
다음과 같이....
수정된 구문 /////////////
return "<img src='$g4[path]/data/file/$board[bo_table]/".urlencode($file)."' name='target_resize_image[]' {$big_img} title='$content'>";
게시판 목록
그누4 팁자료실
그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.
나누면 즐거움이 커집니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 3309 | 3년 전 | 1803 | ||
| 3308 | 11년 전 | 2091 | ||
| 3307 |
uPAmJ903
|
6년 전 | 4750 | |
| 3306 |
바른사나이
|
6년 전 | 3273 | |
| 3305 | 6년 전 | 12306 | ||
| 3304 | 7년 전 | 3703 | ||
| 3303 | 7년 전 | 3742 | ||
| 3302 |
지리산초보
|
7년 전 | 13597 | |
| 3301 |
sozet
|
8년 전 | 4903 | |
| 3300 |
sozet
|
8년 전 | 5972 | |
| 3299 |
sozet
|
8년 전 | 10862 | |
| 3298 | 8년 전 | 4015 | ||
| 3297 |
또치하우스
|
8년 전 | 4442 | |
| 3296 | 8년 전 | 11971 | ||
| 3295 |
또치하우스
|
8년 전 | 14985 | |
| 3294 | 8년 전 | 6025 | ||
| 3293 | 8년 전 | 5588 | ||
| 3292 |
 bluells |
9년 전 | 5317 | |
| 3291 | 9년 전 | 13677 | ||
| 3290 | 9년 전 | 5052 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기