갤러리 스킨 밑에 작은 사진들 크기와 간격은 어떻게 조정하나요? > 그누4 질문답변

그누4 질문답변

그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드4 바로가기
기존 게시물은 열람만 가능합니다.

갤러리 스킨 밑에 작은 사진들 크기와 간격은 어떻게 조정하나요? 정보

갤러리 스킨 밑에 작은 사진들 크기와 간격은 어떻게 조정하나요?

본문

http://sir.co.kr/bbs/board.php?bo_table=g4_skin&wr_id=84369&sca=%EA%B0%A4%EB%9F%AC%EB%A6%AC&sfl=wr_subject%7C%7Cwr_content&stx=%EC%8A%AC%EB%9D%BC%EC%9D%B4%EB%93%9C&page=2

묵혼님의 스킨을 사용해서 홈페이지를 만들어보았습니다.

그런데 위의 스킨을 적용해서 갤러리 스킨을 만들었는데

밑에 사진들 8개를 넣다보니 간격이 벌어져서요..

어떻게 바꾸는지 아시는 분 알려주세요~ 부탁드립니다.

뷰스킨.php
제가 만든 사이트 적용한 것

http://modernhaus.mireene.com/modernhaus/bbs/board.php?bo_table=test&wr_id=4


<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가

$ViewRows = 9; // 출력 개수
$rewidth = 86; // 썸네일 이미지 가로크기
$reheight = 53; // 썸네일 이미지 세로크기
$settime = 5; // 타임아웃 시간 (초)

$td_width = $rewidth + 16;
$td_height = $reheight + 52;

$file = array();

for ( $i = 0; $i < $view[file][count]; $i++ )
{
  if ( $view[file][$i][file] )
    $file[] = $view[file][$i];
}
?>
<!-- 게시글 보기 시작 -->
<table width="<?=$width?>" align="center" cellpadding="0" cellspacing="0"><tr><td width="640">

<table border=0 cellpadding=0 cellspacing=0 width=<?=$width?>>
<?
// 가변 파일
$cnt = 0;
for ($i=0; $i<count($view[file]); $i++) {
    if ($view[file][$i][source] && !$view[file][$i][view]) {
        $cnt++;
        echo "<tr><td height=30 background=\"$board_skin_path/img/view_dot.gif\">";
        echo "&nbsp;&nbsp;<img src='{$board_skin_path}/img/icon_file.gif' align=absmiddle border='0'>";
        echo "<a href=\"javascript:file_download('{$view[file][$i][href]}', '{$view[file][$i][source]}');\" title='{$view[file][$i][content]}'>";
        echo "&nbsp;<span style=\"color:#888;\">{$view[file][$i][source]} ({$view[file][$i][size]})</span>";
        echo "&nbsp;<span style=\"color:#ff6600; font-size:11px;\">[{$view[file][$i][download]}]</span>";
        echo "&nbsp;<span style=\"color:#d3d3d3; font-size:11px;\">DATE : {$view[file][$i][datetime]}</span>";
        echo "</a></td></tr>";
    }
}

// 링크
$cnt = 0;
for ($i=1; $i<=$g4[link_count]; $i++) {
    if ($view[link][$i]) {
        $cnt++;
        $link = cut_str($view[link][$i], 70);
        echo "<tr><td height=30 background=\"$board_skin_path/img/view_dot.gif\">";
        echo "&nbsp;&nbsp;<img src='{$board_skin_path}/img/icon_link.gif' align=absmiddle border='0'>";
        echo "<a href='{$view[link_href][$i]}' target=_blank>";
        echo "&nbsp;<span style=\"color:#888;\">{$link}</span>";
        echo "&nbsp;<span style=\"color:#ff6600; font-size:11px;\">[{$view[link_hit][$i]}]</span>";
        echo "</a></td></tr>";
    }
}
?>
<tr>
  <td>

    <div style='clear:both;'>
      <table align=center cellpadding=0 cellspacing=0 border=0>
      <tr>
        <td><div id=fadein_content style='width:640px; height:400px; position:relative;'></div></td>
      </tr>
      </table>
    </div>

    <script language='javascript'>
    var array_image = new Array();
    </script>

    <table width=90% cellpadding=0 cellspacing=0 border=0>
    <tr>
      <td style='padding:5px;' valign="bottom"><img src='<?=$board_skin_path?>/img/arr01.gif' align=absmiddle onClick="prev_images()" style='cursor:pointer;' alt="이전" /></td>

      <td>

        <table align=center cellpadding=0 cellspacing=0 border=0>
        <tr>
          <td>

            <div style='float:left; position:relative; width:<?=$td_width*$ViewRows?>px; height:<?=$td_height?>px; overflow:hidden;'>
              <div id=image_layer style='position:absolute; left:0;'>

                <table id=image_content cellpadding=0 cellspacing=0 border=0>
                <tr>
                  <?
                  // 파일 출력
                  for ($i = 0; $i < count( $file ); $i++ )
                  {
                    $original_file = $file[$i][path]."/".$file[$i][file];
                    $thumb_file = $file[$i][path]."/thumb_".$file[$i][file];

                    if ( ! file_exists( $thumb_file ) ) // 썸네일 시작
                    {
                      list( $img_width, $img_height, $type ) = @getimagesize( $original_file );

                      if ( $type == 1 ) $img_sour = imagecreatefromgif( $original_file );
                      else if ( $type == 2 ) $img_sour = imagecreatefromjpeg( $original_file );
                      else if ( $type == 3 ) $img_sour = imagecreatefrompng( $original_file );
                      else return false;

                      if ( $img_width > $img_height )
                      {
                          $width = round( $reheight * $img_width / $img_height );
                          $height = $reheight;
                      }
                      else
                      {
                          $width = $rewidth;
                          $height = round( $rewidth * $img_height / $img_width );
                      }

                      if ( $width < $rewidth )
                      {
                          $width = round( ( $height + $rewidth - $width ) * $img_width / $img_height );
                          $height = round( ( $width + $rewidth - $width ) * $img_height / $img_width );
                      }
                      else if ($height < $reheight)
                      {
                          $height = round( ( $width + $reheight - $height ) * $img_height / $img_width );
                          $width = round( ( $height + $reheight - $height ) * $img_width / $img_height );
                      }

                      $x_last = round( ( $width - $rewidth ) / 2 );
                      $y_last = round( ( $height - $reheight ) / 2 );

                      if ( ( $img_width < $rewidth ) || ( $img_height < $reheight ) )
                      {
                          $img_last = imagecreatetruecolor( $rewidth, $reheight );
                          $x_last = round( ( $rewidth - $img_width ) / 2 );
                          $y_last = round( ( $reheight - $img_height ) / 2 );

                          imagecopy( $img_last, $img_sour, $x_last, $y_last, 0, 0, $width, $height );
                          imagedestroy( $img_sour );
                          $white = imagecolorallocate( $img_last, 255, 255, 255);
                          imagefill( $img_last, 0, 0, $white );
                      }
                      else
                      {
                          $img_dest = imagecreatetruecolor( $width, $height );
                          imagecopyresampled( $img_dest, $img_sour, 0, 0, 0, 0, $width, $height, $img_width, $img_height );
                          $img_last = imagecreatetruecolor( $rewidth, $reheight );
                          imagecopy( $img_last, $img_dest, 0, 0, $x_last, $y_last, $width, $height );
                          imagedestroy( $img_dest );
                      }

                      if ( $type == 1 ) imagegif($img_last, $thumb_file, 100);
                      else if ( $type == 2 ) imagejpeg($img_last, $thumb_file, 100);
                      else if ( $type == 3 ) imagepng($img_last, $thumb_file, 100);

                      imagedestroy($img_last);
                    } // 썸네일 끝

                    ?>

                    <td style='padding:5px;' width=<?=$td_width?> height=<?=$td_height?> align=center valign=bottom onmouseover='image_over ( <?=$i?> )' onmouseout='image_out( <?=$i?> )'>
                      <div style='clear:both; text-align:left;'>
                        &nbsp;<img src='<?=$board_skin_path?>/img/number<?=$i+1?>.gif' align=absmiddle>
                      </div>
                      <div style='clear:both;'>
                        <img src='<?=$thumb_file?>' id=thumb_image align=absmiddle style='border:3px solid #ffffff;'>
                      </div>
  <!--
                      <div style='clear:both; text-align:left; font-size:8pt; font-family:dotum; padding:2px 0 2px  0;'>
                        <?=$file[$i][bf_content]?>
                      </div>
  -->
                    </td>

                    <script language='javascript'>
                    array_image[<?=$i?>] = "<?=$original_file?>";
                    </script>

                    <?
                  }
                  ?>
                </tr>
                </table>
              </div>
            </div>
          </td>
        </tr>
        </table>
      </td>

      <td style='padding:5px;' valign="bottom"><img src='<?=$board_skin_path?>/img/arr02.gif' align=absmiddle onClick="next_images()" style='cursor:pointer;' alt="다음" /></td>
    </tr>
    </table>

  </td>
</tr>

<tr>
    <td style="word-break:break-all; padding:10px;">
        <!-- 내용 출력 -->
        <span id="writeContents"><?//=$view[content];?></span>

        <?//echo $view[rich_content]; // 과 같은 코드를 사용할 경우?>
        <!-- 테러 태그 방지용 --></xml></xmp><a href=""></a><a href=''></a>

        <? if ($nogood_href) {?>
        <div style="width:72px; height:55px; background:url(<?=$board_skin_path?>/img/good_bg.gif) no-repeat; text-align:center; float:right;">
        <div style="color:#888; margin:7px 0 5px 0;">비추천 : <?=number_format($view[wr_nogood])?></div>
        <div><a href="<?=$nogood_href?>" target="hiddenframe"><img src="<?=$board_skin_path?>/img/icon_nogood.gif" border='0' align="absmiddle"></a></div>
        </div>
        <? } ?>

        <? if ($good_href) {?>
        <div style="width:72px; height:55px; background:url(<?=$board_skin_path?>/img/good_bg.gif) no-repeat; text-align:center; float:right;">
        <div style="color:#888; margin:7px 0 5px 0;"><span style='color:crimson;'>추천 : <?=number_format($view[wr_good])?></span></div>
        <div><a href="<?=$good_href?>" target="hiddenframe"><img src="<?=$board_skin_path?>/img/icon_good.gif" border='0' align="absmiddle"></a></div>
        </div>
        <? } ?>

</td>
</tr>
<? if ($is_signature) { echo "<tr><td align='center' style='border-bottom:1px solid #E7E7E7; padding:5px 0;'>$signature</td></tr>"; } // 서명 출력 ?>
</table>
<br>

<div style="height:1px; line-height:1px; font-size:1px; background-color:#ddd; clear:both;">&nbsp;</div>

<div style="clear:both; height:43px;">
    <div style="float:left; margin-top:10px;">
    <? if ($prev_href) { echo "<a href=\"$prev_href\" title=\"$prev_wr_subject\"><img src='$board_skin_path/img/btn_prev.gif' border='0' align='absmiddle'></a>&nbsp;"; } ?>
    <? if ($next_href) { echo "<a href=\"$next_href\" title=\"$next_wr_subject\"><img src='$board_skin_path/img/btn_next.gif' border='0' align='absmiddle'></a>&nbsp;"; } ?>
    </div>

<div style="clear:both; height:30px;">
    <!-- 링크 버튼 -->
    <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>
</div>
</div>

<div style="height:2px; line-height:1px; font-size:1px; background-color:#dedede; clear:both;">&nbsp;</div>

</td></tr></table><br>

<script language="JavaScript">
function file_download(link, file) {
    <? if ($board[bo_download_point] < 0) { ?>if (confirm("'"+file+"' 파일을 다운로드 하시면 포인트가 차감(<?=number_format($board[bo_download_point])?>점)됩니다.\n\n포인트는 게시물당 한번만 차감되며 다음에 다시 다운로드 하셔도 중복하여 차감하지 않습니다.\n\n그래도 다운로드 하시겠습니까?"))<?}?>
    document.location.href=link;
}
</script>

<script language="JavaScript" src="<?="$g4[path]/js/board.js"?>"></script>
<script language="JavaScript">
var NowImg = 0;
var ViewRows = parseInt( <?=$ViewRows?> ); // 보여지는 개수
var TotalRows = parseInt( <?=count( $file )?> ); // 전체 개수
var TdWidth = parseInt( <?=$td_width?> ); // 한칸당 가로 크기
var before_FilePath; // 패이드인 이전 파일
var MoveNum = 0;
var Stv; // 타임아웃

function fadein_over( FilePath )
{
  if ( before_FilePath == FilePath )
return;

  before_FilePath = FilePath;

  parent_node = document.getElementById( "fadein_content" );

  if ( ! parent_node.width ) parent_node.width = parseInt( parent_node.style.width, 10 );
  if ( ! parent_node.height ) parent_node.height = parseInt( parent_node.style.height, 10 );

  TargetDiv = parent_node.getElementsByTagName( "A" )[0];

  if ( typeof( TargetDiv ) == "undefined" )
TargetDiv = parent_node;

  TargetDiv_element = TargetDiv.getElementsByTagName( "IMG" );

  // DIV 엘리먼트가 10 개 정도 되면 하나씩 삭제
  if ( TargetDiv_element.length >= 2 )
TargetDiv.removeChild( TargetDiv_element[0] );

  element = document.createElement( "IMG" );
  element.style.position = "absolute";
  element.style.width = parent_node.width+"px";
  element.style.height = parent_node.height+"px";
  element.src = FilePath;

  if ( navigator.appName == "Microsoft Internet Explorer" )
element.style.filter = "Alpha(opacity=0)";
  else
element.style.opacity = "0.0";

  TargetDiv.appendChild( element );

  setTimeout( "fadein( element )", 10 );
}

function fadein( element )
{
  number = element.getAttribute( "number" );

  if ( ! number )
  number = 0;

  if ( navigator.appName == "Microsoft Internet Explorer" )
  {
    number = parseInt( number );
    number += 9;

    element.style.filter = "Alpha(opacity="+number+")";

    if ( parseInt( number ) >= 100  )
    {
      element.style.filter = "Alpha(opacity=100)";
      return;
    }
  }
  else
  {
    number = parseFloat( number );
    number += 0.05;

    element.style.opacity = number;

    if ( parseInt( number ) >= 1  )
    {
      element.style.opacity = 1;
      return;
    }
  }

  element.setAttribute( "number", number );

  setTimeout( "fadein( element )", 10 );
}

function next_images()
{
  clearTimeout( Stv );

  NowImg++;

  if ( NowImg > TotalRows - 1 )
    NowImg = 0;

  image_border ( NowImg );
  fadein_over( array_image[NowImg] );
  Stv = setTimeout( 'next_images()', <?=$settime*1000?> );

  MoveNum = NowImg;
  return;
}

function prev_images()
{
  clearTimeout( Stv );

  NowImg--;

  if ( NowImg < 0 )
    NowImg = TotalRows - 1;

  image_border ( NowImg );
  fadein_over( array_image[NowImg] );
  Stv = setTimeout( 'next_images()', <?=$settime*1000?> );

  MoveNum = NowImg;
  return;
}

function move_content()
{
  NowLeft = parseInt( document.getElementById( "image_layer" ).style.left, 10 );
  LeftLoc = Math.ceil( Math.abs( NowLeft - ( MoveNum * TdWidth ) ) / 2 );

  if ( ViewRows + MoveNum > TotalRows )
    LeftLoc = Math.ceil( Math.abs( NowLeft - ( ( TotalRows - ViewRows ) * TdWidth ) ) / 2 );

  if ( TotalRows <= ViewRows )
    LeftLoc = 0;

  document.getElementById( "image_layer" ).style.left = -LeftLoc+"px";
}

function image_border ( num )
{
  content = document.getElementById( "image_content" ).getElementsByTagName( "IMG" );

  for ( i = 0, k = 0; i < content.length; i++ )
  {
    if ( content[i].getAttribute( "id" ) == "thumb_image" )
    {
      content[i].style.border = num == k ? "3px solid #ff6347" : "3px solid #ffffff" ;
      k++;
    }
  }

  return;
}

function image_over ( num )
{
  NowImg = num;
  image_border ( num );
  fadein_over( array_image[num] );
  clearTimeout( Stv );
  return;
}

function image_out ( num )
{
  NowImg = num;
  image_border ( num );
  fadein_over( array_image[num] );
  Stv = setTimeout( 'next_images()', <?=$settime*1000?> );
  return;
}

window.onload = function()
{
    resizeBoardImage(<?=(int)$board[bo_image_width]?>);
    drawFont();

    <?
    if ( $file[0][file] )
    {
      echo "fadein_over( array_image[0] );\n";
      echo "image_border ( 0 );\n";
    }

    if ( $file[1][file] )
    {
      echo "Stv = setTimeout( 'next_images()', ".($settime*1000)." );\n";
      echo "setInterval( 'move_content()', 1 )\n";
    }
    ?>
}
</script>
<!-- 게시글 보기 끝 -->

부탁이요~-.- _._
  • 복사

댓글 전체

<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가

$ViewRows = 9; // 출력 개수
$rewidth = 86; // 썸네일 이미지 가로크기
$reheight = 53; // 썸네일 이미지 세로크기
$settime = 5; // 타임아웃 시간 (초)

$td_width = $rewidth + 16;
$td_height = $reheight + 52;

 이미지 가로 세로 숫자를 변경하시면 될듯하네요. td_width 이부분이 이미지간 간격이라고 보면 될것 같구요
© SIRSOFT
현재 페이지 제일 처음으로