이미지 리사이즈 jQuery 로 변경 방법 총정리
[수정할 파일]
view.php
common.lib.php
board.js
각스킨별 view.skin.php
1. view.php 파일 114줄 쯤 아래와 같은 소스가 있습니다.
2. common.lib.php 파일 904줄 아래로 아래와 같은 소스가 있습니다.
3. board.js 파일에 아래 소스 추가 합니다.
4. 스킨별 view.skin.php 파일의 내용과 파일을 불러주는 부분을 div 테그로 막아줍니다.
5. 스킨별 view.skin.php 에서 최하단에 아래와 같은 방법으로 수정합니다.
view.php
common.lib.php
board.js
각스킨별 view.skin.php
1. view.php 파일 114줄 쯤 아래와 같은 소스가 있습니다.
$view[content] = preg_replace("/(\<img )([^\>]*)(\>)/i", "\\1 name='target_resize_image[]' onclick='image_window(this)' style='cursor:pointer;' \\2 \\3", $view[content]);
이 소스를 주석처리 해주세요.//$view[content] = preg_replace("/(\<img )([^\>]*)(\>)/i", "\\1 name='target_resize_image[]' onclick='image_window(this)' style='cursor:pointer;' \\2 \\3", $view[content]);
2. common.lib.php 파일 904줄 아래로 아래와 같은 소스가 있습니다.
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'>";
이소스를 아래와 같이 수정해주세요.
return "<img src='$g4[path]/data/file/$board[bo_table]/".urlencode($file)."' title='$content'>";
3. board.js 파일에 아래 소스 추가 합니다.
jQuery.resimg = function(element, options){
var setting = { imageWidth:false, minusSize:30, borderColor:false }
$.extend(setting, options);
var imageWidth = setting.imageWidth;
var borderColor = setting.borderColor;
var minusSize = setting.minusSize;
if(!imageWidth){
// 이미지가 로딩되면 부모의 사이즈도 변경됨으로 잠시 띄운다.
$(element).css("position", "absolute");
// 이미지 교정 값이 없다면 부모의 폭 크기를 구한다 이때 페딩값을 제외 한다.
var pw = $(element).parent().innerWidth();
var plp = parseInt($(element).parent().css("padding-left").replace("px", ""));
var prp = parseInt($(element).parent().css("padding-right").replace("px", ""));
var tp = plp + prp;
// 줄어들 사이즈 보다 페딩값이 크거나 같다면 줄어들 사이즈를 페딩값으로 교정하여 엘리먼트가 트러지는것을 방지한다.
if(minusSize <= tp) minusSize = tp;
// 이미지 사이즈를 엘리먼트 사이즈에서 minusSize 값을 뺀값
imageWidth = pw - minusSize;
$(element).css("position", "");
}
// 엘리먼트의 자식중 img 를 선택한다.
var element = element + " img";
//alert($(element).parent().children().get().length);
$(element).each(function(){
var img_width = $(this).outerWidth();
var img_height = $(this).outerHeight();
//원래 사이즈를 저장한다.
//$(this).attr("tmp_width", img_width);
//$(this).attr("tmp_height", img_height);
var i = $(element).index($(this));
$(element)[i].tmp_width = img_width;
$(element)[i].tmp_height = img_height;
// 이미지 폭이 테이블 폭보다 크다면 테이블폭에 맞춘다
if(img_width > imageWidth) {
imageHeight = parseFloat(img_width/ img_height);
$(this).width(imageWidth).height(parseInt(imageWidth / imageHeight)).css("cursor", "pointer");
//$(this).width(imageWidth).css("cursor", "pointer");
}
if (borderColor) $(this).css({ "border" : "1px solid "+ borderColor });
}).click(function(){
image_window(this);
});
}
var setting = { imageWidth:false, minusSize:30, borderColor:false }
$.extend(setting, options);
var imageWidth = setting.imageWidth;
var borderColor = setting.borderColor;
var minusSize = setting.minusSize;
if(!imageWidth){
// 이미지가 로딩되면 부모의 사이즈도 변경됨으로 잠시 띄운다.
$(element).css("position", "absolute");
// 이미지 교정 값이 없다면 부모의 폭 크기를 구한다 이때 페딩값을 제외 한다.
var pw = $(element).parent().innerWidth();
var plp = parseInt($(element).parent().css("padding-left").replace("px", ""));
var prp = parseInt($(element).parent().css("padding-right").replace("px", ""));
var tp = plp + prp;
// 줄어들 사이즈 보다 페딩값이 크거나 같다면 줄어들 사이즈를 페딩값으로 교정하여 엘리먼트가 트러지는것을 방지한다.
if(minusSize <= tp) minusSize = tp;
// 이미지 사이즈를 엘리먼트 사이즈에서 minusSize 값을 뺀값
imageWidth = pw - minusSize;
$(element).css("position", "");
}
// 엘리먼트의 자식중 img 를 선택한다.
var element = element + " img";
//alert($(element).parent().children().get().length);
$(element).each(function(){
var img_width = $(this).outerWidth();
var img_height = $(this).outerHeight();
//원래 사이즈를 저장한다.
//$(this).attr("tmp_width", img_width);
//$(this).attr("tmp_height", img_height);
var i = $(element).index($(this));
$(element)[i].tmp_width = img_width;
$(element)[i].tmp_height = img_height;
// 이미지 폭이 테이블 폭보다 크다면 테이블폭에 맞춘다
if(img_width > imageWidth) {
imageHeight = parseFloat(img_width/ img_height);
$(this).width(imageWidth).height(parseInt(imageWidth / imageHeight)).css("cursor", "pointer");
//$(this).width(imageWidth).css("cursor", "pointer");
}
if (borderColor) $(this).css({ "border" : "1px solid "+ borderColor });
}).click(function(){
image_window(this);
});
}
4. 스킨별 view.skin.php 파일의 내용과 파일을 불러주는 부분을 div 테그로 막아줍니다.
<div id="resimages">
<?
// 파일 출력
for ($i=0; $i<=count($view[file]); $i++) {
if ($view[file][$i][view])
echo $view[file][$i][view] . "<p>";
}
?>
<!-- 내용 출력 -->
<span id="writeContents"><?=$view[content];?></span>
</div>
<?
// 파일 출력
for ($i=0; $i<=count($view[file]); $i++) {
if ($view[file][$i][view])
echo $view[file][$i][view] . "<p>";
}
?>
<!-- 내용 출력 -->
<span id="writeContents"><?=$view[content];?></span>
</div>
5. 스킨별 view.skin.php 에서 최하단에 아래와 같은 방법으로 수정합니다.
<script language="JavaScript" src="<?=$g4[path]?>/js/jquery-latest.js"></script>// jQuery 임포트.
<script language="JavaScript" src="<?="$g4[path]/js/board.js"?>"></script>
<script language="JavaScript">
$(document).ready(function(){
$.resimg("div#resimages");
//resizeBoardImage(<?=(int)$board[bo_image_width]?>);
drawFont();
});
</script>
<script language="JavaScript" src="<?="$g4[path]/js/board.js"?>"></script>
<script language="JavaScript">
$(document).ready(function(){
$.resimg("div#resimages");
//resizeBoardImage(<?=(int)$board[bo_image_width]?>);
drawFont();
});
</script>
$.resimg("div#resimages");
는 테이블 사이즈에 맞게 조절하라는 의미 입니다.
$.resimg("div#resimages", {imageWidth:<?=(int)$board[bo_image_width]?>});
는 보드 설정 값에 따라 크기를 조절합니다.
$.resimg("div#resimages", {minusSize:20});
는 테이블 크기보다 20픽셀 줄입니다. 이때 페팅값이 20픽셀보다 크면 페딩값에 맞추어 줄입니다.
그외 옵션으로 borderColor 가 있습니다.
borderColor 는 이미지에 1픽셀의 테두리를 주며 그 색상을 지정합니다.
는 테이블 사이즈에 맞게 조절하라는 의미 입니다.
$.resimg("div#resimages", {imageWidth:<?=(int)$board[bo_image_width]?>});
는 보드 설정 값에 따라 크기를 조절합니다.
$.resimg("div#resimages", {minusSize:20});
는 테이블 크기보다 20픽셀 줄입니다. 이때 페팅값이 20픽셀보다 크면 페딩값에 맞추어 줄입니다.
그외 옵션으로 borderColor 가 있습니다.
borderColor 는 이미지에 1픽셀의 테두리를 주며 그 색상을 지정합니다.
[이 게시물은 관리자님에 의해 2011-10-31 16:55:28 jQuery에서 이동 됨]
댓글 5개
16년 전
10번 추천을 못 눌르는게 미안합니다. ㅠ..ㅠ...
board.js 파일의 모든 것을 jQuery로 바꿀려고 보다가 gblog 작업 때문에 미뤘는데
다 끝내버리셨네요. jQuery의 대가가 되신거 같아요.
그누도 제로처럼 jQuery Transfer를 해야하는데 쉽지가 않은거 같아요.
drawFont() 함수까지 해서 board.js를 싹~ jQuery로 바꿀 수는 없을까요? (욕심만 늘어갑니다)
올려주신 코드는 테스트해보구 추가로 feedback 하겠습니다.
조금 보완하면 jQuery plugin 등록하셔도 될 것 같아요.
board.js 파일의 모든 것을 jQuery로 바꿀려고 보다가 gblog 작업 때문에 미뤘는데
다 끝내버리셨네요. jQuery의 대가가 되신거 같아요.
그누도 제로처럼 jQuery Transfer를 해야하는데 쉽지가 않은거 같아요.
drawFont() 함수까지 해서 board.js를 싹~ jQuery로 바꿀 수는 없을까요? (욕심만 늘어갑니다)
올려주신 코드는 테스트해보구 추가로 feedback 하겠습니다.
조금 보완하면 jQuery plugin 등록하셔도 될 것 같아요.
16년 전
그런데... jquery 로하면 소스가 더 긴것 같은데 속도 면에서는 어떤게 낳은 가요?
기존꺼랑 비교하면요...
기존꺼랑 비교하면요...
16년 전
코멘트가 많아서 그렇지 소스는 짧습니다.
속도는 큰 차이는 없는거 같구요 프로그램 유연성은 아주 높습니다.
속도는 큰 차이는 없는거 같구요 프로그램 유연성은 아주 높습니다.
16년 전
위 소스로 바꾸어 보았는데 이미지가 리사이즈가 되지 않네요..
$.resimg("div#resimages");
는 테이블 사이즈에 맞게 조절하라는 의미 입니다.
$.resimg("div#resimages", {imageWidth:<?=(int)$board[bo_image_width]?>});
는 보드 설정 값에 따라 크기를 조절합니다.
$.resimg("div#resimages", {minusSize:20});
는 테이블 크기보다 20픽셀 줄입니다. 이때 페팅값이 20픽셀보다 크면 페딩값에 맞추어 줄입니다.
- 리사이징이 안됩니다 -
리사이징 기능??
감사합니다.
$.resimg("div#resimages");
는 테이블 사이즈에 맞게 조절하라는 의미 입니다.
$.resimg("div#resimages", {imageWidth:<?=(int)$board[bo_image_width]?>});
는 보드 설정 값에 따라 크기를 조절합니다.
$.resimg("div#resimages", {minusSize:20});
는 테이블 크기보다 20픽셀 줄입니다. 이때 페팅값이 20픽셀보다 크면 페딩값에 맞추어 줄입니다.
- 리사이징이 안됩니다 -
리사이징 기능??
감사합니다.
16년 전
$.resimg("div#resimages");
-> $.resimg("#resimages");
이상하게도 div#resimages로는 못 찾더라구요.
-> $.resimg("#resimages");
이상하게도 div#resimages로는 못 찾더라구요.
게시글 목록
| 번호 | 제목 |
|---|---|
| 12995 | |
| 12994 | |
| 12993 |
JavaScript
[SQL]Delete문
|
| 29390 |
HTML
[SQL]Update문
1
|
| 29389 |
HTML
[SQL]Insert 문
|
| 12992 |
JavaScript
[SQL]등록/수정/삭제 전에 알아둘 사항
|
| 12991 | |
| 29388 |
HTML
[SQL]Table 만들기
|
| 29387 |
HTML
[SQL]SQL의 기초 (3)
|
| 29386 |
HTML
[SQL]SQL의 기초 (2)
|
| 29384 |
HTML
[SQL]SQL의 기초 (I)
1
|
| 29383 |
HTML
[SQL]DATABASE의 구조
|
| 29382 | |
| 25079 |
마케팅
마케팅 전략 ppt자료
3
|
| 12989 |
MySQL
php 에서 자바스크립트로 배열 보내기
1
|
| 12988 |
기타
이벤트 객체
|
| 25070 | |
| 12987 | |
| 29381 | |
| 12986 |
JavaScript
에디터로 작성한 게시물에서 특정태그없애기
|
| 12985 |
PHP
롤링배너객체 Rolling
|
| 12984 |
JavaScript
간단하게 만들어본 메일전송 클래스
|
| 12979 |
JavaScript
24시간 이내에 수정된 php 파일만 찾기
4
|
| 12978 |
Flash
무툴즈를 이용한 플래시 비슷한 탑메뉴~~~
|
| 12977 | |
| 12973 | |
| 12972 | |
| 12971 | |
| 29380 |
HTML
클릭해서 이미지 팝업 뛰우기.
|
| 12969 | |
| 12968 |
Flash
플래시에 가려진 레이어 올려봅시다.
|
| 12967 | |
| 29379 |
HTML
부끄럽네요. 로그인아웃 표시
|
| 12965 |
기타
PHP 전역변수
1
|
| 12963 |
기타
PHP 배열변수
1
|
| 29378 |
HTML
PHP 변수사용법
|
| 12962 |
기타
PHP 기본구조
|
| 12960 |
Linux
리눅스 자바설치
1
|
| 29377 |
HTML
TAR명령. TAR압축묶기 압축풀기
|
| 12958 | |
| 12955 |
MySQL
ncftp 를 이용한 백업 스크립트
2
|
| 12954 |
기타
ftp 업로드 자동
|
| 12951 |
JavaScript
리눅스 시스템 시간 확인 및 시간 맞추기
2
|
| 12950 |
Linux
리눅스 한글 설정
|
| 12949 |
MySQL
리눅스 한글설정관련_locale
|
| 12946 |
MySQL
웹호스팅 사용자를 위한 계정관리 스크립트
2
|
| 12945 | |
| 12941 | |
| 12939 |
기타
리눅스 시간맞추기
1
|
| 12938 |
기타
리눅스 기본명령어들
|
| 12936 | |
| 12931 | |
| 29376 |
HTML
윈도우2003서버 관리
|
| 12928 | |
| 29375 | |
| 12927 |
JavaScript
간단한 텍스트 스크롤
|
| 12926 | |
| 12923 |
MySQL
mysql 5.0.x 공백문자인식
2
|
| 12921 | |
| 12918 | |
| 12917 | |
| 12914 | |
| 12909 |
정규표현식
정규표현식 튜토리얼
4
|
| 12906 | |
| 12903 | |
| 12902 |
JavaScript
확장자 bak 파일 지우기
|
| 298 | |
| 12901 |
JavaScript
프로젝트의 구축 방법에 관한 내용입니다.
|
| 12891 | |
| 12888 |
Flash
[질문] 플래시 메뉴를 통한 링크...
2
|
| 12886 | |
| 295 | |
| 12885 |
Flash
flv 플레이어 자막연동 보드 완성 하였음
|
| 12883 |
JavaScript
flv 동영상 자막 싱크만드는 중입니다. txt 연동
1
|
| 12881 |
Flash
풀 플래시 소스
1
|
| 292 | |
| 12880 | |
| 290 | |
| 287 | |
| 12879 | |
| 285 | |
| 12875 | |
| 12872 | |
| 280 | |
| 12857 | |
| 276 | |
| 275 | |
| 25063 |
계약서
홈페이지 관리계약서
6
|
| 271 | |
| 29369 |
HTML
제가 그린 일러스트입니다.
5
|
| 268 | |
| 267 | |
| 12852 |
JavaScript
원격이미지 조건에 따른 썸네일 생성
4
|
| 12851 |
JavaScript
윈도우 APM 에서 리눅스의 심볼릭 링크 사용하기
|
| 265 | |
| 263 | |
| 12844 |
Flash
도와주세요~
6
|
| 260 | |
| 12841 |
JavaScript
사진 뽀샤시 ~~
2
|
| 12834 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기