[수정할 파일]
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개
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 등록하셔도 될 것 같아요.
위 소스로 바꾸어 보았는데 이미지가 리사이즈가 되지 않네요..
$.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픽셀보다 크면 페딩값에 맞추어 줄입니다.
- 리사이징이 안됩니다 -
리사이징 기능??
감사합니다.
게시글 목록
| 번호 | 제목 |
|---|---|
| 29416 | |
| 13230 | |
| 13227 | |
| 13226 |
JavaScript
PHP 이미지 지원 함수
|
| 13225 | |
| 13224 |
MySQL
심플쪽지2.0n
|
| 25107 | |
| 13219 |
JavaScript
iframe 외부의 부모 값에 접근.
4
|
| 13218 |
jQuery
select plugin
|
| 13216 | |
| 13211 | |
| 13210 | |
| 29415 |
HTML
prototype API
|
| 13204 | |
| 13202 |
jQuery
이미지 리사이즈 jQuery 로 변경 방법
1
|
| 29411 | |
| 13199 | |
| 13196 |
기타
tar 복사
2
|
| 13192 |
jQuery
jQuery 셀렉트 박스 입니다.
3
|
| 13191 | |
| 13189 | |
| 13186 | |
| 29408 | |
| 13185 |
jQuery
jQuery plugin Editors
|
| 13183 |
jQuery
jQuery 그래프 애니메이션
1
|
| 13178 | |
| 13173 |
기타
이번달 일수 구하기
4
|
| 13166 |
jQuery
SIR 메인에 사용된 jQuery widget
6
|
| 13165 |
기타
property 구현
|
| 13163 |
JavaScript
한글만 입력되게
1
|
| 13162 |
기타
휴대폰번호 검사
|
| 13157 | |
| 13153 |
jQuery
이미지 없으면 자동으로 No Image 출력
3
|
| 13149 |
JavaScript
a 링크 점선 없애기, input+label 묶기
3
|
| 13144 |
jQuery
ifrmae 자동 리사이즈
4
|
| 13142 | |
| 13141 | |
| 13140 |
jQuery
jquery 예
|
| 13138 | |
| 13137 |
MySQL
insert에서 where 사용하기
|
| 13136 |
MySQL
MySQL Database 언어코드 수정하기
|
| 25102 | |
| 13135 |
jQuery
회원가입 아이디 체크부분 jQuery 버젼
|
| 13132 |
jQuery
jQuery History & Bookmark
2
|
| 13131 |
jQuery
스포일러 기능~
|
| 13130 |
jQuery
이미지를 순서대로 로딩하기
|
| 13128 |
jQuery
jQuery 페이징
1
|
| 13125 |
jQuery
폼 입력값 검사
2
|
| 13117 |
JavaScript
간단한 서브메뉴 onmouseover 이벤트 팁
7
|
| 13116 | |
| 13114 |
jQuery
jQuery Cheat sheet
1
|
| 13113 | |
| 13109 |
jQuery
간단한 풍선도움말
3
|
| 13106 |
jQuery
자동등록방지 코드
2
|
| 13105 | |
| 13103 | |
| 13102 |
JavaScript
클릭으로 수량 조절
|
| 13099 |
jQuery
AJAX Libraries API -- 구글
2
|
| 13096 | |
| 13091 |
jQuery
jQuery 동적테이블
4
|
| 29404 | |
| 13090 | |
| 13087 |
JavaScript
검색엔진에 노출을 못하게 하는 방법
2
|
| 29400 | |
| 13085 | |
| 13082 | |
| 29398 | |
| 13081 |
JavaScript
페이지 인쇄할때 자동으로 다음장 인쇄 기능
|
| 13080 |
기타
특정문자 제거하기
|
| 13077 |
JavaScript
숫자만 입력되게 하기
2
|
| 25097 | |
| 13076 | |
| 13075 |
기타
팝업뛰우기
|
| 13072 |
JavaScript
접속시 우측 하단에 메시지 나타나게 하기
2
|
| 13071 |
MySQL
phpMyAdmin 3.0 설치 방법
|
| 29397 |
HTML
글자수 제한시켜 짜르기
|
| 13069 | |
| 13068 | |
| 13063 | |
| 13060 |
JavaScript
ezPrice 금액 입력 도우미
2
|
| 25092 | |
| 25091 | |
| 25090 | |
| 13056 |
MySQL
FOUND_ROWS()
3
|
| 13055 | |
| 13054 | |
| 29396 |
HTML
레이어 스부적스부적 이동 스크립트
|
| 13045 | |
| 13042 | |
| 13026 | |
| 13022 | |
| 13017 | |
| 13013 |
PHP
정규식 질문드립니다.
3
|
| 13008 | |
| 13002 |
PHP
태그변환 정규식
5
|
| 12998 | |
| 25083 | |
| 12997 | |
| 29394 | |
| 29392 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기