게시판에 이미지 게시판 폭보다 큰사이즈의 이미지만 클릭되게하기 > 그누4 팁자료실

그누4 팁자료실

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

게시판에 이미지 게시판 폭보다 큰사이즈의 이미지만 클릭되게하기 정보

게시판에 이미지 게시판 폭보다 큰사이즈의 이미지만 클릭되게하기

본문

게시판에 이미지를 업로드 하면 큰것이나 작은것이나 모두 클릭이 되어 원본사이즈로 보기가 나옵니다만.. 큰이미지는 괜찮지만 작은이미지 같은 경우엔 실질적으로 그 기능이 필요 없습니다. 그래서 작은 사이즈이미지는 그것이 안되게 하는겁니다.
검색해봐도 안나오는거 같아 간단히 수정해 보았습니다..

수정되는 부분은 빨간글씨로 처리했습니다.

------------------------------------------------------------------------------------
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;'
이 부분을 삭제해 주시면 작은 이미지에는 일반 포인터가 큰 이미지에서는 손가락 모양의 포인터가 나타나게 됩니다.
추천
0

댓글 5개

화일 하나만 수정하믄 되는 다른방법 입니다.
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'>";
전체 3,310 |RSS
그누4 팁자료실 내용 검색

회원로그인

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