첨부된 이미지를 일정비율로 보이게 하려면... 정보
첨부된 이미지를 일정비율로 보이게 하려면...본문
안녕하세요 그누가족 여러분^^
view페이지에서 이미지가 일정비율로 축소 내지는 확대해서 나타나게 하고 싶은데
어떻게 수정을 해야 할까요? 지금 쓰고 있는 스킨에서는 이미지가 보이는곳에 width="450" height="450"으로 되어 있어서 원본이미지에 따라서 찌그러짐등이 생기네요 이걸 원본에 맞게 일정비율로 나타내고 싶은데 어디를 수정해야될지 모르겠습니다.아시는 분은 좀 도와주세요 (ㅜㅜ)(__)
작업스킨은 mino 님이 올려주신걸로 작업을 하고 있습니다.
스킨주소:
http://sir.co.kr/bbs/board.php?bo_table=g4_skin&wr_id=76384&sca=&sfl=wr_subject%7C%7Cwr_content&stx=%B0%B6%B7%AF%B8%AE&sop=and&page=5
----------------------------------------------------------------------------------
view.skin.php 소스입니다.
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
?>
<!-- 아래 style 의 14 라인 : 선택안된 배경이미지, 24 라인 : 선택된 배경이미지 -->
<style>
.tp_test_nCell{border-bottom: 0px solid #D3D3D3;}
.tp_test_Content1{border-top-width:0;}
.tp_test_Content2{font:12px 돋움;}
.tp_test_Cell{
padding-top:5;
font:13px 돋움;
background:url('<?=$board_skin_path?>/img/tp_unselect.png') no-repeat 50%;
height:29;
width:100;
text-align:center;
cursor:pointer;
cursor:hand;
}
.tp_test_sCell{
padding-top:5;
font:13px 돋움;
background-image:url('<?=$board_skin_path?>/img/tp_select.png');
background-position: 50%;
background-repeat: no-repeat;
height:29;
width:100;
text-align:center;
cursor:pointer;
cursor:hand;
}
.scroll {
scrollbar-face-color : #FFFFFF;
scrollbar-arrow-color : #777777;
scrollbar-highlight-color : #FFFFFF;
scrollbar-shadow-color : #FFFFFF;
scrollbar-3dlight-color : #777777;
scrollbar-darkshadow-color : #777777;
scrollbar-track-color : #F7F7F7;
}
#imgView {border:1px solid #D5D5D5; width:210px;height:146px;float:left; text-align:center; padding-top:9px;}
.imgRe { -ms-interpolation-mode: bicubic; }
</style>
<script>
function obxTabPage(sizex , sizey, cssHead){
if(!cssHead) this.cssHead='';
else this.cssHead=cssHead;
document.write(
'<table cellpadding="0" cellspacing="0" style="table-layout:fixed;padding:1;height:'+sizey+';width:'+sizex+'">' +
'<tr><td class=TP_'+this.cssHead+'_NCELL width=*> </td></tr>'+
'<tr><td class=TP_'+this.cssHead+'_CONTENT1 width=100%> </td></tr>'+
'</table>'
);
this.height=sizey;
this.width=sizex;
var tables=document.getElementsByTagName("table");
this.table=tables[tables.length-1];
this.titleRow=this.table.rows[0];
this.nullCell = this.titleRow.cells[0];
this.contentRow = this.table.rows[1];
this.contentCell = this.contentRow.cells[0];
this.item= new Object();
this.length=0;
var re=new RegExp("\\bobxtp=(\\w+)\\b",'i');
if(location.search.match(re)) this.defaultView = RegExp.$1;
this.addStart= function (id,title,idx,action) {
var iIndex=(idx) ? idx-1 : this.length;
this.item[id] = this.titleRow.insertCell(iIndex);
this.item[id].className='TP_'+this.cssHead+'_CELL';
this.item[id].parentObject=this;
this.item[id].onclick=Function("this.parentObject.show('"+id+"');");
if(action) this.item[id].action = action;
this.item[id].height=25;
this.item[id].innerHTML=title;
document.write('<div style="display:none;width:100%;height:100%">');
var divs=document.getElementsByTagName("div");
this.item[id].content = divs[divs.length-1];
this.item[id].content.className='TP_'+this.cssHead+'_CONTENT2';
this.DrawingID=id;
this.length++;
this.contentCell.colSpan=this.length+1;
}
this.addEnd = function () {
document.write("</div></div>");
this.contentCell.appendChild(this.item[this.DrawingID].content);
if(!this.LastShownItemID) this.show(this.DrawingID,1);
else if(this.defaultView==this.DrawingID) this.show(this.defaultView,1);
}
this.show = function (id,runtime){
if (this.LastShownItemID) this.hide(this.LastShownItemID);
this.LastShownItemID = id;
this.item[id].className='TP_'+this.cssHead+'_SCELL';
this.item[id].content.style.display='';
if(this.item[id].action) {
try{eval(this.item[id].action);}catch(e){}}
}
this.hide = function (id){
this.item[id].className='TP_'+this.cssHead+'_CELL';;
this.item[id].content.style.display="none";
}
}
</script>
<script>
//Table Size 조정
/*
function ImageResizing(objFrame) {
if (!objFrame) return;
//height 조정
var conversionSize = 10;
var orgWidth = objFrame.width;
var orgHeight = objFrame.height;
if (( orgWidth > conversionSize) || (orgHeight > conversionSize)){
if (orgWidth > orgHeight){
newWidth = conversionSize;
newHeight = Math.round((conversionSize * orgHeight)/orgWidth);
}else{
newWidth = Math.round((conversionSize * orgWidth)/orgHeight);
newHeight = conversionSize;
}
objFrame.width = newWidth;
objFrame.height = newHeight;
}
}
function ThumbViewer(ImageObj){
// if (ImageObj.src == "http://pics.auction.co.kr/buy/itempage/no_image_thumb.gif") return;
ThumbImage0.style.border = "silver 1px solid";
ThumbImage1.style.border = "silver 1px solid";
ThumbImage2.style.border = "silver 1px solid";
if (ThumbImage0 == ImageObj) ThumbImage0.style.border = "#333333 1px solid";
if (ThumbImage1 == ImageObj) ThumbImage1.style.border = "#333333 1px solid";
if (ThumbImage2 == ImageObj) ThumbImage2.style.border = "#333333 1px solid";
if (ThumbImage1 == ImageObj){
img0.style.display = "none";
img1.style.display = "";
img2.style.display = "none";
ImageResizing(img1);
}
else if (ThumbImage2 == ImageObj){
img0.style.display = "none";
img1.style.display = "none";
img2.style.display = "";
ImageResizing(img2);
}
else
{
img0.style.display = "";
img1.style.display = "none";
img2.style.display = "none";
ImageResizing(img0);
}
}
*/
</script>
<?
$img = "$g4[path]/data/file/$bo_table/".urlencode($view[file][0][file]);
if (!file_exists($img) || !$view[file][0][file]) $img = "<?=$board_skin_path?>/img/noimageB.gif";
?>
<!-- 게시글 보기 시작 -->
<table width="<?=$width?>" align="center" cellpadding="0" cellspacing="0" style="margin-top:24px;"><tr><td>
<!-- 링크 버튼 -->
<!--<div style="float:right;">
<?
ob_start();
?>
<?// if ($copy_href) { echo "<a href=\"$copy_href\"><img src='$board_skin_path/img/btn_copy.gif' border='0' align='absmiddle'></a> "; } ?>
<?// if ($move_href) { echo "<a href=\"$move_href\"><img src='$board_skin_path/img/btn_move.gif' border='0' align='absmiddle'></a> "; } ?>
<?// if ($search_href) { echo "<a href=\"$search_href\"><img src='$board_skin_path/img/btn_list_search.gif' border='0' align='absmiddle'></a> "; } ?>
<? echo "<a href=\"$list_href\"><img src='$board_skin_path/img/btn_list.gif' border='0' align='absmiddle'></a> "; ?>
<? if ($update_href) { echo "<a href=\"$update_href\"><img src='$board_skin_path/img/btn_modify.gif' border='0' align='absmiddle'></a> "; } ?>
<?// if ($delete_href) { echo "<a href=\"$delete_href\"><img src='$board_skin_path/img/btn_delete.gif' border='0' align='absmiddle'></a> "; } ?>
<?// if ($reply_href) { echo "<a href=\"$reply_href\"><img src='$board_skin_path/img/btn_reply.gif' border='0' align='absmiddle'></a> "; } ?>
<?// if ($write_href) { echo "<a href=\"$write_href\"><img src='$board_skin_path/img/btn_write.gif' border='0' align='absmiddle'></a> "; } ?>
<?
$link_buttons = ob_get_contents();
ob_end_flush();
?>
</div>-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="210" valign="top">
<!--뷰페이지이미지----->
<div id="imgView">
<?
// 파일 출력
$sql = "select * from $g4[board_file_table] where `bo_table`='$bo_table' and `wr_id`='$wr_id'";
$result=mysql_query($sql);
for($i=0 ; $row = mysql_fetch_array($result) ; $i++){
if($i > 0){
$style= "style=\"display:none\"";
}
echo "<img src =$g4[path]/data/file/$bo_table/$row[bf_file] width=192 height=155 border=0 id=img$i $style>";
$thumimg[$i]=" <img src =$g4[path]/data/file/$bo_table/$row[bf_file] width=30 height=20 border=0 id=ThumbImage$i onfocus=\"javascript:ThumbViewer(this)\" onMouseOver=\"javascript:ThumbViewer(this)\">";
}
?>
</div>
<!--<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="9" colspan="3"><img src="<?= $board_skin_path?>/img/progress/skin_top.gif" width="210" height="9"></td>
</tr>
<tr>
<td width="9" background="<?= $board_skin_path?>/img/progress/skin_left.gif"> </td>
<td width="192" height="128">
</td>
<td width="9" valign="top" background="<?= $board_skin_path?>/img/progress/skin_right.gif"><img src="<?= $board_skin_path?>/img/progress/skin_right_img.gif" width="9" height="5"></td>
</tr>
<tr>
<td colspan="3"><img src="<?= $board_skin_path?>/img/progress/skin_down.gif" width="210" height="9"></td>
</tr>
<tr>
<td colspan="3" height="5"></td>
</tr>
<tr>
<td colspan="3" height="30" align="right">
<?php
echo $thumimg[0];
echo $thumimg[1];
echo $thumimg[2];
?>
</td>
</tr>
</table>-->
<!--//뷰페이지이미지----->
</td>
<td width="10"></td>
<td valign="top">
<table width="100%" border="0" align="right" cellpadding="0" cellspacing="0">
<!-- 추가필드시작-->
<tr><td height=2 bgcolor=#727272></td></tr>
<!-- <tr><td height=1 bgcolor=#E7E7E7></td></tr> -->
<tr><td height=30 style="padding-left:7px" ><?php echo "<img src='{$board_skin_path}/img/homepagemake_icon.gif' align=absmiddle>" ?> <font color="#000000">제품명 :</font> <?php echo $view[subject] ?></td></tr>
<tr><td height=1 bgcolor=#D5D5D5></td></tr>
<tr><td height=30 style="padding-left:7px" ><?php echo "<img src='{$board_skin_path}/img/homepagemake_icon.gif' align=absmiddle>" ?> <font color="#000000">크기 :</font> <?php echo $view[wr_1] ?></td></tr>
<tr><td height=1 bgcolor=#D5D5D5></td></tr>
<tr><td height=30 style="padding-left:7px" ><?php echo "<img src='{$board_skin_path}/img/homepagemake_icon.gif' align=absmiddle>" ?> <font color="#000000">무게 :</font> <?=$view[wr_3]?></td></tr>
<tr><td height=1 bgcolor=#D5D5D5></td></tr>
<tr>
<td height=30 style="padding:3px 0 0 7px" ><?=$view[wr_2]?></td></tr>
<!--<tr>
<td height=30 > <?php echo "<img src='{$board_skin_path}/img/homepagemake_icon.gif' align=absmiddle>" ?> 사양서 : <?
// 사양서 파일 다운로드 출력
$cnt = 0;
for ($i=4; $i<count($view[file]); $i++)
{
if ($view[file][$i][source])
{
$cnt++;
echo "<img src='{$board_skin_path}/img/icon_file.gif' align=absmiddle> <a href='{$view[file][$i][href]}' title='{$view[file][$i][content]}'>{$view[file][$i][source]} ({$view[file][$i][size]}), Down : {$view[file][$i][download]}</a>";
}
} ?> </td>
</tr>-->
<tr><td height=1 bgcolor=#D5D5D5></td></tr>
<!-- 추가필드끝-->
<!--<tr>
<td height="20" valign="bottom"> <?=$view[wr_content]?></td>
</tr>-->
</table>
</td>
</tr>
</table>
<BR>
<!-- 박스 시작-->
<!--탭시작 -->
<script>tp=new obxTabPage('100%','100%','test'); // 이게 초기설정</script>
<!--
<script>tp.addStart("1page","제품개요"); // 1페이지 시작</script>
<table style="border:3px #EAEAEA solid;" cellspacing="0" width="100%" align="center">
<tr><td valign="top" style="word-break:break-all; padding:7px;">
<div style='z-index:3; height:expression(document.body.clientHeight-500);overflow:auto;' class=scroll>
//내용 출력
<?=$view[wr_content]?>
</div>
</td></tr></table>
<script>tp.addEnd();// 1페이지 끝</script>
<script>tp.addStart("2page","제품특징");// 2페이지 시작</script>
<table style="border:3px #EAEAEA solid;" cellspacing="0" width="100%" align="center">
<tr><td valign="top" style="word-break:break-all; padding:7px;">
<div style='z-index:4; height:expression(document.body.clientHeight-500);overflow:auto;' class=scroll>
<?=$view[wr_link1]?>
</div>
</td></tr></table>
<script>tp.addEnd();// 2페이지 끝</script>
<script>tp.addStart("3page","제품구성품");// 3페이지 시작</script>
<table style="border:3px #EAEAEA solid;" cellspacing="0" width="100%" align="center">
<tr><td valign="top" style="word-break:break-all; padding:7px;">
<div style='z-index:5; height:expression(document.body.clientHeight-500);overflow:auto;' class=scroll>
<?=$view[wr_link2]?>
</div>
</td></tr></table>
<script>tp.addEnd();// 3페이지 끝</script>
-->
<!--<script>tp.addStart("4page","갤러리");// 4페이지 시작</script>-->
<img src="<?= $board_skin_path?>/img/title_item.gif" boder="0">
<table cellspacing="0" width="100%" align="center">
<tr><td valign="top" style="word-break:break-all; padding:7px;">
<table style=" margin-top:0; margin-bottom:0;" border="0" cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td width="470" rowspan="4" align="center" valign="top"><img class="imgRe" id=orgin_img src="../data/file/<?=$bo_table?>/<?=$view[file][0][file]?>" width="450" height="450" border="0"></td>
<td width="20" rowspan="4"></td>
<td width="110"><img onclick="ch_img('fimg1');" id=fimg1 src="../data/file/<?=$bo_table?>/<?=$view[file][0][file]?>" style="cursor:pointer;" border="0" width="110" height="110"></td>
</tr>
<tr>
<td><img onclick="ch_img('fimg2');" id=fimg2 src="<? if ($view[file][1][file]) { ?>../data/file/<?=$bo_table?>/<?=$view[file][1][file]?><? } else { ?><?=$board_skin_path?>/img/noimage.gif<? } ?>" border="0" style="margin-top:5px; cursor:pointer;" width="110" height="110"></td>
</tr>
<tr>
<td><img onclick="ch_img('fimg3');" id=fimg3 src="<? if ($view[file][2][file]) { ?>../data/file/<?=$bo_table?>/<?=$view[file][2][file]?><? } else { ?><?=$board_skin_path?>/img/noimage.gif<? } ?>" border="0" style="margin-top:5px; cursor:pointer;" width="110" height="110"></td>
</tr>
<tr>
<td><img onclick="ch_img('fimg4');" id=fimg4 src="<? if ($view[file][3][file]) { ?>../data/file/<?=$bo_table?>/<?=$view[file][3][file]?><? } else { ?><?=$board_skin_path?>/img/noimage.gif<? } ?>" border="0" style="margin-top:5px; cursor:pointer;" width="110" height="110"></td>
</tr>
</table>
</td></tr></table>
<script>tp.addEnd();</script>
<!-- 박스 끝-->
</td></tr>
<tr>
<td align="right" style="padding-top:7px"><?=$link_buttons?></td>
</tr>
</table>
<script language="JavaScript">
// HTML 로 넘어온 <img ... > 태그의 폭이 테이블폭보다 크다면 테이블폭을 적용한다.
function resize_image()
{
var target = document.getElementsByName('target_resize_image[]');
var image_width = parseInt('<?=$board[bo_image_width]?>');
var image_height = 0;
for(i=0; i<target.length; i++) {
// 원래 사이즈를 저장해 놓는다
target[i].tmp_width = target[i].width;
target[i].tmp_height = target[i].height;
// 이미지 폭이 테이블 폭보다 크다면 테이블폭에 맞춘다
if(target[i].width > image_width) {
image_height = parseFloat(target[i].width / target[i].height)
target[i].width = image_width;
target[i].height = parseInt(image_width / image_height);
}
}
}
window.onload = resize_image;
</script>
<!-- 게시글 보기 끝 -->
<script>
function ch_img(id){
var ol = document.getElementById("orgin_img");
ol.src = document.getElementById(id).src;
}
</script>
댓글 전체
우선 이미지를 호출할때 세로는 지정하지 않습니다. 그리고,
$imgsize = getimagesize("경로/파일명.jpg");
if($imgsize[0] > 450){$width = "450";}else{$width = $imgsize[0];} //이미지 가로가 450 이상이면 450으로 고정
이미지를 아래처럼 불러오면 가로에대한 세로길이가 자동으로 지정되고 찌그러지지 않습니다.
<img src="경로/파일명.jpg" width=<?=$width?>>
제가 잘 몰라서 그러는데
$imgsize = getimagesize("경로/파일명.jpg");
if($imgsize[0] > 450){$width = "450";}else{$width = $imgsize[0];} //이미지 가로가 450 이상이면 450으로 고정 <--- 이부분을 어디에다 적용해야 하는지도 알려주실수 있나요?
부탁드립니다.
이미지를 불러오기전
예를들어 홀짝님이 올려주신글 초록색 부분 윗줄 적당한 부분에 적용시키면 됩니다.
<?
$imgsize = getimagesize("../data/file/<?=$bo_table?>/<?=$view[file][0][file]?>");
if($imgsize[0] > 450){$width = "450";}else{$width = $imgsize[0];} //이미지 가로가 450 이상이면 450으로 고정
?>
이렇게 입력하였는데요...경로가 이상한지 그림도 안나타나고(원랜 나타났던 경로입니다)
에러메시지가 뜨네요...어찌하면 좋을까요?^^;;
$imgsize = getimagesize("../data/file/$bo_table/$view[file][0][file]");
if($imgsize[0] > 450){$width = "450";}else{$width = $imgsize[0];} //이미지 가로가 450 이상이면 450으로 고정
?>
이렇게 하셔야 합니다^^
Warning: getimagesize(../data/file/prod_01/Array[0][file]) [function.getimagesize]: failed to open stream: No such file or directory in /home1/kosfun/gnu/skin/board/itemA/view.skin.php on line 334
위와 같은 에러메시지가 뜨네요...^^;;
이렇게 한번 수정해 보세용~
썸네일이 않되면 위분껄로
공수래공수거님 시간 내주셔서 감사드립니다 (__)