도와주세요, 구글처럼 가로폭을 자유롭게 하고 싶어요. 정보
도와주세요, 구글처럼 가로폭을 자유롭게 하고 싶어요.
본문
지금 갤러리 스킨을 만지고 있습니다.
그런데 가로로 몇개의 이미지를 놓을 것이냐할 때
일반적으로는 관리자설정-게시판설정의 "가로이미지수"를 조정하거나
강제로
$cols=6; // 이미지 가로갯수
이런 식으로 지정해서
<td colspan=<?=$cols;?> height=20>
이런 식으로 테이블의 폭을 맞추는 걸로 알고 있습니다.
그런데, 구글 이미지 검색을 해보니
브라우저의 가변적인 폭만큼 그에 대해 가로로 길게 이미지가 나열됩니다.
브라우저를 줄이면 한줄의 이미지가 다음줄로 넘어가면서
거의 저체를 이미지가 꽉 메웁니다.
구글처럼 가로폭에 따라 가변적인 여러장의이미지가 한줄에 들어가게 만들고 싶은데요...
브라우저가 좁을 경우엔 반대로 한줄의 이미지수가 작아지구요....
제가 받은 원래의 소스가 아래와 같다면 어떻게 바꾸면 될까요?
아니면 소스라도 알 수 없을까요?
<?
for ($i=0; $i<count($list); $i++)
{
if ($i && $i%$mod==0)
echo "</tr><tr><td colspan='{$mod}' height=20></td></tr><tr>";
$img = "<img src='$board_skin_path/img/noimage.gif' border=0 title='이미지 없음'>";
$image = $list[$i][file][0][file];
//$thumb = $thumb_path.'/'.$list[$i][wr_id];
$thumb = $thumb_path.'/'.$list[$i][file][0][file];
if (!file_exists($thumb))
{
$file = $list[$i][file][0][path] .'/'. $list[$i][file][0][file];
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 = $thumb_width / $size[0];
$height = (int)($size[1] * $rate);
if ($height < $thumb_height)
$dst = imagecreatetruecolor($thumb_width, $height);
else
$dst = imagecreatetruecolor($thumb_width, $thumb_height);
/*imagecopyresampled($dst, $src, 0, 0, 0, 0, $thumb_width, $height, $size[0], $size[1]);
imagejpeg($dst, $thumb_path.'/'.$list[$i][file][0][file], $thumb_quality);
chmod($thumb_path.'/'.$list[$i][file][0][file], 0606);*/
imagecopyresampled($dst, $src, 0, 0, 0, 0, $thumb_width, $height, $size[0], $size[1]);
imagejpeg($dst, $thumb_path.'/'.$list[$i][file][0][file], $thumb_quality);
chmod($thumb_path.'/'.$list[$i][file][0][file], 0606);
imagejpeg($dst, $thumb_path.'/'.$list[$i][wr_id], $thumb_quality);
chmod($thumb_path.'/'.$list[$i][wr_id], 0606);
}
}
if (file_exists($thumb) && $list[$i][file][0][file]) {
$img = "<a href='$g4[path]/data/file/$bo_table/$image') class='highslide' onclick='return hs.expand(this)' ><img src='{$thumb}' width='{$thumb_width}' height='{$thumb_height}' border=0 style='border:0px solid #999999;'></a>";
} else {
preg_match("`<\s*img\s+src\s*=\s*['|\"]?([^'|\"\s]+://[^'|\"\s]+\.(gif|jpe?g|png))['|\"]?\s*[^>]+`i", $list[$i]['wr_content'], $images);
if (!empty($images[1])) {
$img_size = GetImageSize("$images[1]");
if($img_size[0] >= $img_size[1]) {
$imgper = $thumb_width/$img_size[0];
$thumb_height = $img_size[1]*$imgper;
}else{
$imgper = $thumb_height/$img_size[1];
$thumb_width = $img_size[0]*$imgper;
}
$img = "<a href='$g4[path]/data/file/$bo_table/$image') class='highslide' onclick='return hs.expand(this)' ><img src='{$images[1]}' width='{$thumb_width}' height='{$thumb_height}' align='absmiddle' border='0'></a>";
} else {
echo "";
}
}
?>
그런데 가로로 몇개의 이미지를 놓을 것이냐할 때
일반적으로는 관리자설정-게시판설정의 "가로이미지수"를 조정하거나
강제로
$cols=6; // 이미지 가로갯수
이런 식으로 지정해서
<td colspan=<?=$cols;?> height=20>
이런 식으로 테이블의 폭을 맞추는 걸로 알고 있습니다.
그런데, 구글 이미지 검색을 해보니
브라우저의 가변적인 폭만큼 그에 대해 가로로 길게 이미지가 나열됩니다.
브라우저를 줄이면 한줄의 이미지가 다음줄로 넘어가면서
거의 저체를 이미지가 꽉 메웁니다.
구글처럼 가로폭에 따라 가변적인 여러장의이미지가 한줄에 들어가게 만들고 싶은데요...
브라우저가 좁을 경우엔 반대로 한줄의 이미지수가 작아지구요....
제가 받은 원래의 소스가 아래와 같다면 어떻게 바꾸면 될까요?
아니면 소스라도 알 수 없을까요?
<?
for ($i=0; $i<count($list); $i++)
{
if ($i && $i%$mod==0)
echo "</tr><tr><td colspan='{$mod}' height=20></td></tr><tr>";
$img = "<img src='$board_skin_path/img/noimage.gif' border=0 title='이미지 없음'>";
$image = $list[$i][file][0][file];
//$thumb = $thumb_path.'/'.$list[$i][wr_id];
$thumb = $thumb_path.'/'.$list[$i][file][0][file];
if (!file_exists($thumb))
{
$file = $list[$i][file][0][path] .'/'. $list[$i][file][0][file];
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 = $thumb_width / $size[0];
$height = (int)($size[1] * $rate);
if ($height < $thumb_height)
$dst = imagecreatetruecolor($thumb_width, $height);
else
$dst = imagecreatetruecolor($thumb_width, $thumb_height);
/*imagecopyresampled($dst, $src, 0, 0, 0, 0, $thumb_width, $height, $size[0], $size[1]);
imagejpeg($dst, $thumb_path.'/'.$list[$i][file][0][file], $thumb_quality);
chmod($thumb_path.'/'.$list[$i][file][0][file], 0606);*/
imagecopyresampled($dst, $src, 0, 0, 0, 0, $thumb_width, $height, $size[0], $size[1]);
imagejpeg($dst, $thumb_path.'/'.$list[$i][file][0][file], $thumb_quality);
chmod($thumb_path.'/'.$list[$i][file][0][file], 0606);
imagejpeg($dst, $thumb_path.'/'.$list[$i][wr_id], $thumb_quality);
chmod($thumb_path.'/'.$list[$i][wr_id], 0606);
}
}
if (file_exists($thumb) && $list[$i][file][0][file]) {
$img = "<a href='$g4[path]/data/file/$bo_table/$image') class='highslide' onclick='return hs.expand(this)' ><img src='{$thumb}' width='{$thumb_width}' height='{$thumb_height}' border=0 style='border:0px solid #999999;'></a>";
} else {
preg_match("`<\s*img\s+src\s*=\s*['|\"]?([^'|\"\s]+://[^'|\"\s]+\.(gif|jpe?g|png))['|\"]?\s*[^>]+`i", $list[$i]['wr_content'], $images);
if (!empty($images[1])) {
$img_size = GetImageSize("$images[1]");
if($img_size[0] >= $img_size[1]) {
$imgper = $thumb_width/$img_size[0];
$thumb_height = $img_size[1]*$imgper;
}else{
$imgper = $thumb_height/$img_size[1];
$thumb_width = $img_size[0]*$imgper;
}
$img = "<a href='$g4[path]/data/file/$bo_table/$image') class='highslide' onclick='return hs.expand(this)' ><img src='{$images[1]}' width='{$thumb_width}' height='{$thumb_height}' align='absmiddle' border='0'></a>";
} else {
echo "";
}
}
?>
댓글 전체
구글것은 Ajax인것 같네요..
아래처럼 단순한 방법으로도 가능은 할겁니다.
- float:left;속성으로 창크기만큼 왼쪽으로 쭉~ 놓이고 나머지는 자연스럽게 아래로 떨어지게됩니다.
<div style="width:auto; height:auto; _width:100%; _height:100%;">
for ($i=0; $i<count($list); $i++)
{
//줄바꿈 관련 조건등은 모두 빼고 단순하게 이미지블럭의 크기만 지정해줍니다.
<ul style="float:left; display:inline; list-style-type:none; width:100px; height:100px; margin:5px; border:1px solid black;">
<li>img</li>
<li>제목</li>
</ul>
}
</div>
아래처럼 단순한 방법으로도 가능은 할겁니다.
- float:left;속성으로 창크기만큼 왼쪽으로 쭉~ 놓이고 나머지는 자연스럽게 아래로 떨어지게됩니다.
<div style="width:auto; height:auto; _width:100%; _height:100%;">
for ($i=0; $i<count($list); $i++)
{
//줄바꿈 관련 조건등은 모두 빼고 단순하게 이미지블럭의 크기만 지정해줍니다.
<ul style="float:left; display:inline; list-style-type:none; width:100px; height:100px; margin:5px; border:1px solid black;">
<li>img</li>
<li>제목</li>
</ul>
}
</div>