지운아빠

리사이즈 된 이미지의 높이 값 알아내기

그누보드에서는 원본이미지의 넓이가 게시판에 설정된 넓이보다 클 경우 자동으로 리사이즈 됩니다.
이 때 리사이즈 된 이미지 값은 당연히 게시판에 설정된 값이므로 쉽게 알 수 있지만, 높이 값은 따로 구해야 합니다.
혹시 중복이면 자삭하겠습니다.

이 팁은 이미지를 한 장만 올릴 수 있는 게시판에서 사용할 때를 가정하고 만든 팁입니다.

js/board.js 에서

// 이미지 폭이 테이블 폭보다 크다면 테이블폭에 맞춘다
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';
// 스타일에 적용된 이미지의 폭과 높이를 삭제한다
target[i].style.width = '';
target[i].style.height = '';
}

부분을

// 이미지 폭이 테이블 폭보다 크다면 테이블폭에 맞춘다
if(target[i].width > imageWidth) {
imageHeight = parseFloat(target[i].width / target[i].height)
target[i].width = imageWidth;
target[i].height = parseInt(imageWidth / imageHeight);
pixheight(target[i].height);//이미지리사이즈된 높이 계산 by 지운아빠
target[i].style.cursor = 'pointer';
// 스타일에 적용된 이미지의 폭과 높이를 삭제한다
target[i].style.width = '';
target[i].style.height = '';
} else {
pixheight(target[i].tmp_height);//이미지리사이즈된 높이 계산 by 지운아빠
}

로 고쳐주시면 pixheight(a) 에 리사이즈 된 높이 값이 들어가게 됩니다.


활용은

function pixheight(a){//이미지리사이즈된 높이 계산해서 버튼 위치 지정 by 지운아빠
var pixheight = a / 2;
$('.btn_pix').css('top',pixheight);
}

과 같이 할 수 있습니다.

리사이즈 된 이미지 높이의 중간에 원하는 버튼이 위치하도록 활용한 예입니다.
|

댓글 1개

좋은팁 감사합니당 ^^
댓글을 작성하시려면 로그인이 필요합니다. 로그인

그누4 팁자료실

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

+
제목 글쓴이 날짜 조회
13년 전 조회 6,507
13년 전 조회 6,595
13년 전 조회 4,456
13년 전 조회 4,361
13년 전 조회 5,539
13년 전 조회 6,131
13년 전 조회 7,436
13년 전 조회 5,495
13년 전 조회 4,117
13년 전 조회 4,473
13년 전 조회 6,925
13년 전 조회 7,124
13년 전 조회 1.3만
13년 전 조회 4,360
13년 전 조회 4,952
13년 전 조회 7,118
13년 전 조회 3,398
13년 전 조회 4,551
13년 전 조회 6,332
13년 전 조회 1.2만
🐛 버그신고