썸네일 가로 3개씩 세로 배치 정보
썸네일 가로 3개씩 세로 배치관련링크
본문
뷰페이지에 썸네일을 가로 3개씩 세로로 7줄 나오게 하려고 합니다.
질문답변 검색도 해보고 여러가지 방법을 해봤는데 해결이 않되네요 아시는분 도움 좀 부탁드립니다.
<SCRIPT LANGUAGE="JavaScript">
<!--
image_directory = ""; //배경이미지 경로
clear = new Image(); clear.src = image_directory + "./img/blank.gif";
<?
//파일 뽑기
$sql2 = " select bf_file from $g4[board_file_table] where bo_table = '$bo_table' and wr_id = '$wr_id' order by bf_no limit 0, 20 ";
$result2 = sql_query($sql2);
for ($j=0; $row2 = sql_fetch_array($result2); $j++) {
if ($j==0)
$view_one = "{$g4['path']}/data/file/{$bo_table}/{$row2['bf_file']}";
?>
view_img<?=$j?> = new Image();
view_img<?=$j?>.src = "<?=$g4['path']?>/data/file/<?=$bo_table?>/<?=$row2['bf_file']?>";
<? } ?>
function bgChange(imgName) {
document.all.view_img.src = eval(imgName + ".src");
}
// -->
</SCRIPT>
<!-- 타이틀 --><br><br>
<table width="780px" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<div style='width:450px; position:relative; overflow:hidden;' align=center><img src="<?=$view_one?>" name="view_img" border="1" width="450px" style="border-color:#d5d5d5;"></div>
</td>
<td valign="top">
<!-- 작은이미지 시작 -->
<?
//파일 뽑기
$sql = " select bf_file from $g4[board_file_table] where bo_table = '$bo_table' and wr_id = '$wr_id' order by bf_no limit 0, 20 ";
$result = sql_query($sql);
for ($i=0; $row = sql_fetch_array($result); $i++) {
//썸네일 코드 시작
$data_path = $g4['path'] . "/data/file/{$bo_table}";//라이브러리 파일 참조
$thumb_path = $data_path . '/thumbOpen';
$view_w = 55; //썸네일 가로사이즈
$view_h = 55; //썸네일 세로사이즈
$sch_q = 100; //썸네일 퀼리티
if (!is_dir($thumb_path)) {
@mkdir($thumb_path, 0707);
@chmod($thumb_path, 0707);
}
$filename = $row[bf_file]; //파일명
$thumb = $thumb_path.'/'.$filename; //썸네일
if (!file_exists($thumb))
{
$file = $data_path.'/'.$filename; //원본
if (preg_match("/\.(jp[e]?g|gif|png)$/i", $file) && file_exists($file))
{
$size = getimagesize($file);
if ($size[2] == 1)
$src = imagecreatefromgif($file);
else if ($size[2] == 2)
$src = imagecreatefromjpeg($file);
else if ($size[2] == 3)
$src = imagecreatefrompng($file);
else
continue;
$rate = $view_w / $size[0];
$height = (int)($size[1] * $rate);
if ($height < $view_h)
$dst = imagecreatetruecolor($view_w, $height);
else
$dst = imagecreatetruecolor($view_w, $view_h);
imagecopyresampled($dst, $src, 0, 0, 0, 0, $view_w, $height, $size[0], $size[1]);
imagejpeg($dst, $thumb_path.'/'.$filename, $sch_q);
chmod($thumb_path.'/'.$filename, 0707);
}
}
if (file_exists($thumb) && $filename) {
?>
<a href="javascript:void(0);" onMouseOver="bgChange('view_img<?=$i?>');" onMouseOut="bgChange('view_img<?=$i?>');"><img src='<?=$thumb?>' border=1 width=55 height=55 style="border-color:#d5d5d5; margin:0px 0px 8px 6px"></a>
<?
//onMouseOut="bgChange('clear');"
}
}
?>
<!-- 작은이미지 종료 -->
</td>
</tr>
</table>
질문답변 검색도 해보고 여러가지 방법을 해봤는데 해결이 않되네요 아시는분 도움 좀 부탁드립니다.
<SCRIPT LANGUAGE="JavaScript">
<!--
image_directory = ""; //배경이미지 경로
clear = new Image(); clear.src = image_directory + "./img/blank.gif";
<?
//파일 뽑기
$sql2 = " select bf_file from $g4[board_file_table] where bo_table = '$bo_table' and wr_id = '$wr_id' order by bf_no limit 0, 20 ";
$result2 = sql_query($sql2);
for ($j=0; $row2 = sql_fetch_array($result2); $j++) {
if ($j==0)
$view_one = "{$g4['path']}/data/file/{$bo_table}/{$row2['bf_file']}";
?>
view_img<?=$j?> = new Image();
view_img<?=$j?>.src = "<?=$g4['path']?>/data/file/<?=$bo_table?>/<?=$row2['bf_file']?>";
<? } ?>
function bgChange(imgName) {
document.all.view_img.src = eval(imgName + ".src");
}
// -->
</SCRIPT>
<!-- 타이틀 --><br><br>
<table width="780px" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<div style='width:450px; position:relative; overflow:hidden;' align=center><img src="<?=$view_one?>" name="view_img" border="1" width="450px" style="border-color:#d5d5d5;"></div>
</td>
<td valign="top">
<!-- 작은이미지 시작 -->
<?
//파일 뽑기
$sql = " select bf_file from $g4[board_file_table] where bo_table = '$bo_table' and wr_id = '$wr_id' order by bf_no limit 0, 20 ";
$result = sql_query($sql);
for ($i=0; $row = sql_fetch_array($result); $i++) {
//썸네일 코드 시작
$data_path = $g4['path'] . "/data/file/{$bo_table}";//라이브러리 파일 참조
$thumb_path = $data_path . '/thumbOpen';
$view_w = 55; //썸네일 가로사이즈
$view_h = 55; //썸네일 세로사이즈
$sch_q = 100; //썸네일 퀼리티
if (!is_dir($thumb_path)) {
@mkdir($thumb_path, 0707);
@chmod($thumb_path, 0707);
}
$filename = $row[bf_file]; //파일명
$thumb = $thumb_path.'/'.$filename; //썸네일
if (!file_exists($thumb))
{
$file = $data_path.'/'.$filename; //원본
if (preg_match("/\.(jp[e]?g|gif|png)$/i", $file) && file_exists($file))
{
$size = getimagesize($file);
if ($size[2] == 1)
$src = imagecreatefromgif($file);
else if ($size[2] == 2)
$src = imagecreatefromjpeg($file);
else if ($size[2] == 3)
$src = imagecreatefrompng($file);
else
continue;
$rate = $view_w / $size[0];
$height = (int)($size[1] * $rate);
if ($height < $view_h)
$dst = imagecreatetruecolor($view_w, $height);
else
$dst = imagecreatetruecolor($view_w, $view_h);
imagecopyresampled($dst, $src, 0, 0, 0, 0, $view_w, $height, $size[0], $size[1]);
imagejpeg($dst, $thumb_path.'/'.$filename, $sch_q);
chmod($thumb_path.'/'.$filename, 0707);
}
}
if (file_exists($thumb) && $filename) {
?>
<a href="javascript:void(0);" onMouseOver="bgChange('view_img<?=$i?>');" onMouseOut="bgChange('view_img<?=$i?>');"><img src='<?=$thumb?>' border=1 width=55 height=55 style="border-color:#d5d5d5; margin:0px 0px 8px 6px"></a>
<?
//onMouseOut="bgChange('clear');"
}
}
?>
<!-- 작은이미지 종료 -->
</td>
</tr>
</table>
댓글 전체

1. 관리자 > 게시판관리 >해당게시판수정 > 가로이미지수 =3 ,,, 페이지당 목록수 = 21로 지정
2. list.skin.php파일의 for 구문안에서
if($i==%$board[bo_gallery_cols]){ //이미지수
echo "</tr><tr>";
}
이코드로 이미지 세개가 나오면 아래로 내려가게 해주면 한칸에 3개의 이미지씩 7줄이 나오게 됩니다
테이블의 구조는
의 구조입니다
2. list.skin.php파일의 for 구문안에서
if($i==%$board[bo_gallery_cols]){ //이미지수
echo "</tr><tr>";
}
이코드로 이미지 세개가 나오면 아래로 내려가게 해주면 한칸에 3개의 이미지씩 7줄이 나오게 됩니다
테이블의 구조는
<table>
<tr>
<?
for ($i=0; $row = sql_fetch_array($result); $i++) {
if($i==%$board[bo_gallery_cols]){
echo "</tr><tr>";
}
echo"<td>이미지</td>";
}
?>
</tr>
</table>
의 구조입니다
답변 감사합니다.
질문 드린 사항이 뷰페이지 오른쪽 5개씩 나오는 작은이미지 부분을 변경하려 하는데
알려주신 방법을 어떻게 적용해야 할지 모르겠네요 ㅠ.ㅠ
http://cuckoo82.cafe24.com/ver01/bbs/board.php?bo_table=test&wr_id=8
질문 드린 사항이 뷰페이지 오른쪽 5개씩 나오는 작은이미지 부분을 변경하려 하는데
알려주신 방법을 어떻게 적용해야 할지 모르겠네요 ㅠ.ㅠ
http://cuckoo82.cafe24.com/ver01/bbs/board.php?bo_table=test&wr_id=8

포인트가 없어서 페이지를 확인할 수 없다고 나오네요
포인트 사용 않함으로 수정했습니다.

쪼그마한 이미지의 width 나 margin을 조금 줄이시면 5개 올라갑니다
그림의 width가 너무 딱 맞아서 밀리네요
그림의 width가 너무 딱 맞아서 밀리네요

위 소스상에서는
이부분의 width 와 margin 크기를 줄임으로 해결이 가능하네요
<a href="javascript:void(0);" onMouseOver="bgChange('view_img<?=$i?>');" onMouseOut="bgChange('view_img<?=$i?>');"><img src='<?=$thumb?>' border=1 width=55 height=55 style="border-color:#d5d5d5; margin:0px 0px 8px 6px"></a>
이부분의 width 와 margin 크기를 줄임으로 해결이 가능하네요
답변 감사합니다.