이미지가 살짝씩 움직이는데... 정보
이미지가 살짝씩 움직이는데...
본문
http://sir.co.kr/bbs/board.php?bo_table=g4_skin&wr_id=114189&sca=%EC%B5%9C%EC%8B%A0%EA%B8%80&page=3
채윤아빠님의 슬라이딩 최신글 스킨을 이미지 사이즈 변형해서 쓰고 있는데요.;;
원래 수정전에도 위 주소에 미리보기(http://flvplayer.kr/test.php)에서 이미지 클릭해보시면 틀이 살짝씩 움직인다는 것을 알 수 있습니다. 오른쪽으로 움찔움찔(?) 움직여요. 이미지 클릭했을 때 어떤 때는 움직이고 어떤 때는 안움직이고 이런데 이거 잡을 수 있는 방법이 있을까요? 마진이며 패딩이며 슬쩍슬쩍 수정해보는데 안되네요. ; _ ; 마진이나 패딩으로 잡는 게 맞는지요?
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
include_once("$latest_skin_path/skin.lib.php");
$img_width = 165; // 이미지 가로 사이즈
$img_height = 80; // 이미지 세로 사이즈
$frame_width = 560; // 가로길이
$data_path = $g4[path]."/data/file/$bo_table";
$thumb_path = $data_path.'/latest_thumb';
@mkdir($thumb_path, 0707);
@chmod($thumb_path, 0707);
?>
<!--최신글, 이미지, 내용 시작-->
<script type="text/javascript" src="<?=$latest_skin_path?>/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<?=$latest_skin_path?>/js/jquery.imageScroller.js"></script>
<style type="text/css">
body {}
img {border:0}
a {text-decoration:none}
/*스크롤러 스타일*/
div#scroller {background-color:#f7f7f7; position:relative;height:150px; width:<?=$frame_width?>; padding:0 10px;margin:0;clear:both;overflow:hidden;border:1px #ddd solid}
/*좌우버튼*/
div.button {height:30px;}
#btn1, #btn2 {cursor:pointer}
ul#scrollerFrame {width:1000px; padding:0;margin:0;list-style:none;}
ul#scrollerFrame li {position:relative;float:left; margin:0 10 0 10px;width:160px;height:140px;}
/*가격 및 설명 부분*/
ul#scrollerFrame li p {margin:0;padding:0}
ul#scrollerFrame li p.price{font-family:verdana;font-size:12px;font-weight:bold;margin-top:7px;text-align:center;color:#0a62cf}
ul#scrollerFrame li p.comment{font-family:돋움;font-size:11px;letter-spacing:-1px;margin-top:4px;padding:0 5px;text-align:center;color:#f8f8f8;line-height:130%}
/*붙박이 아이콘 설정*/
.besticon {position:absolute;top:0;left:0}
.price {font-family:돋움;font-size:12px;font-weight:bold;padding-top:7px;text-align:center;color:#0a62cf}
</style>
<script type="text/javascript">
$(function(){
$("#scroller").imageScroller({
next:"btn1", //다음 버튼 ID값
prev:"btn2", //이전 버튼 ID값
frame:"scrollerFrame", //스크롤러 프레임 ID값
width:160, //이미지 가로 크기
child:"li", //스크롤 지정 태그
auto:true //오토 롤링 (해제는 false)
});
});
</script>
<div id="scroller">
<div class="button">
<span style="float:left;margin:5px 0 0 0;font-family:verdana;font-size:16px;font-weight:bold;color:#0a62cf;">SLIDE</span>
<span id="btn2" style="float:right;margin:5px 0 0 0;"><img src="<?=$g4[path]?>/shop/next.png"></span>
<span id="btn1" style="float:right;margin:5px 5px 0 0;"><img src="<?=$g4[path]?>/shop/prev.png"></span>
</div>
<ul id="scrollerFrame">
<? for ($i=0; $i<count($list); $i++) { ?>
<li>
<?
if($list[$i][file][0][view]){
$src = $list[$i][file][0][path]."/".$list[$i][file][0][file];
$get_img = getimagesize($src); // 파일정보를 가져옴
// 관리자가 이미지 사이즈를 바꾸었을때를 대비하여 리사이징 크기를 이름에 포함과 이미지 재 첨부시 바뀜
$img_step1 = explode("_",$list[$i][file][0][file]);
$img_step2 = explode(".",$img_step1[1]);
$new_imgname = $img_step2[0];
$thumb_file_list = "{$thumb_path}/{$re_img_width}x{$re_img_height}_{$new_imgname}_{$list[$i][wr_id]}_list";
if(!file_exists($thumb_file_list)){
// gd lib 체크
$gd = gd_info();
$gdversion = substr(preg_replace("/[^0-9]/", "", $gd['GD Version']), 0, 2); // gd 버전이 2.0 이상인지 체크
if(!$gdversion){
$thumb_file_view = $src; // gd 2.0 이하면 강제적으로 줄임
}else{
if($img_width > $get_img[0] || $img_height > $get_img[1]){
$thumb_file_list = $src;
}else{
createThumb_list($img_width,$img_height,$src, $thumb_file_list, $get_img); // list 페이지 썸네일
}
}
}
echo '<div align="center">';
echo '<img class="besticon" src="./img/new.png">';
$img = "<a href='{$list[$i]['href']}'><img src=\"$thumb_file_list\" border=\"0\" width=\"$img_width\" height=\"$img_height\"/><br/><br/><span class='price'>{$list[$i]['subject']}</span></a>";
}else{
// no 이미지를 비율적으로 만들어났음
$img = "<a class=price' href='{$list[$i]['href']}'><img src=\"$latest_skin_path/img/no_image.gif\" border=\"0\" height=\"{$img_height}\" width=\"{$img_width}\"/><BR><span style=\"font-size:9pt;\"><font face=\"돋움\" color=\"#333333\">{$list[$i]['subject']}</span>*/</a>";
}
echo $img;
echo '</div>';
?>
</li>
<? } ?>
</ul>
</div>
채윤아빠님의 슬라이딩 최신글 스킨을 이미지 사이즈 변형해서 쓰고 있는데요.;;
원래 수정전에도 위 주소에 미리보기(http://flvplayer.kr/test.php)에서 이미지 클릭해보시면 틀이 살짝씩 움직인다는 것을 알 수 있습니다. 오른쪽으로 움찔움찔(?) 움직여요. 이미지 클릭했을 때 어떤 때는 움직이고 어떤 때는 안움직이고 이런데 이거 잡을 수 있는 방법이 있을까요? 마진이며 패딩이며 슬쩍슬쩍 수정해보는데 안되네요. ; _ ; 마진이나 패딩으로 잡는 게 맞는지요?
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
include_once("$latest_skin_path/skin.lib.php");
$img_width = 165; // 이미지 가로 사이즈
$img_height = 80; // 이미지 세로 사이즈
$frame_width = 560; // 가로길이
$data_path = $g4[path]."/data/file/$bo_table";
$thumb_path = $data_path.'/latest_thumb';
@mkdir($thumb_path, 0707);
@chmod($thumb_path, 0707);
?>
<!--최신글, 이미지, 내용 시작-->
<script type="text/javascript" src="<?=$latest_skin_path?>/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<?=$latest_skin_path?>/js/jquery.imageScroller.js"></script>
<style type="text/css">
body {}
img {border:0}
a {text-decoration:none}
/*스크롤러 스타일*/
div#scroller {background-color:#f7f7f7; position:relative;height:150px; width:<?=$frame_width?>; padding:0 10px;margin:0;clear:both;overflow:hidden;border:1px #ddd solid}
/*좌우버튼*/
div.button {height:30px;}
#btn1, #btn2 {cursor:pointer}
ul#scrollerFrame {width:1000px; padding:0;margin:0;list-style:none;}
ul#scrollerFrame li {position:relative;float:left; margin:0 10 0 10px;width:160px;height:140px;}
/*가격 및 설명 부분*/
ul#scrollerFrame li p {margin:0;padding:0}
ul#scrollerFrame li p.price{font-family:verdana;font-size:12px;font-weight:bold;margin-top:7px;text-align:center;color:#0a62cf}
ul#scrollerFrame li p.comment{font-family:돋움;font-size:11px;letter-spacing:-1px;margin-top:4px;padding:0 5px;text-align:center;color:#f8f8f8;line-height:130%}
/*붙박이 아이콘 설정*/
.besticon {position:absolute;top:0;left:0}
.price {font-family:돋움;font-size:12px;font-weight:bold;padding-top:7px;text-align:center;color:#0a62cf}
</style>
<script type="text/javascript">
$(function(){
$("#scroller").imageScroller({
next:"btn1", //다음 버튼 ID값
prev:"btn2", //이전 버튼 ID값
frame:"scrollerFrame", //스크롤러 프레임 ID값
width:160, //이미지 가로 크기
child:"li", //스크롤 지정 태그
auto:true //오토 롤링 (해제는 false)
});
});
</script>
<div id="scroller">
<div class="button">
<span style="float:left;margin:5px 0 0 0;font-family:verdana;font-size:16px;font-weight:bold;color:#0a62cf;">SLIDE</span>
<span id="btn2" style="float:right;margin:5px 0 0 0;"><img src="<?=$g4[path]?>/shop/next.png"></span>
<span id="btn1" style="float:right;margin:5px 5px 0 0;"><img src="<?=$g4[path]?>/shop/prev.png"></span>
</div>
<ul id="scrollerFrame">
<? for ($i=0; $i<count($list); $i++) { ?>
<li>
<?
if($list[$i][file][0][view]){
$src = $list[$i][file][0][path]."/".$list[$i][file][0][file];
$get_img = getimagesize($src); // 파일정보를 가져옴
// 관리자가 이미지 사이즈를 바꾸었을때를 대비하여 리사이징 크기를 이름에 포함과 이미지 재 첨부시 바뀜
$img_step1 = explode("_",$list[$i][file][0][file]);
$img_step2 = explode(".",$img_step1[1]);
$new_imgname = $img_step2[0];
$thumb_file_list = "{$thumb_path}/{$re_img_width}x{$re_img_height}_{$new_imgname}_{$list[$i][wr_id]}_list";
if(!file_exists($thumb_file_list)){
// gd lib 체크
$gd = gd_info();
$gdversion = substr(preg_replace("/[^0-9]/", "", $gd['GD Version']), 0, 2); // gd 버전이 2.0 이상인지 체크
if(!$gdversion){
$thumb_file_view = $src; // gd 2.0 이하면 강제적으로 줄임
}else{
if($img_width > $get_img[0] || $img_height > $get_img[1]){
$thumb_file_list = $src;
}else{
createThumb_list($img_width,$img_height,$src, $thumb_file_list, $get_img); // list 페이지 썸네일
}
}
}
echo '<div align="center">';
echo '<img class="besticon" src="./img/new.png">';
$img = "<a href='{$list[$i]['href']}'><img src=\"$thumb_file_list\" border=\"0\" width=\"$img_width\" height=\"$img_height\"/><br/><br/><span class='price'>{$list[$i]['subject']}</span></a>";
}else{
// no 이미지를 비율적으로 만들어났음
$img = "<a class=price' href='{$list[$i]['href']}'><img src=\"$latest_skin_path/img/no_image.gif\" border=\"0\" height=\"{$img_height}\" width=\"{$img_width}\"/><BR><span style=\"font-size:9pt;\"><font face=\"돋움\" color=\"#333333\">{$list[$i]['subject']}</span>*/</a>";
}
echo $img;
echo '</div>';
?>
</li>
<? } ?>
</ul>
</div>
댓글 전체

어느 사이트나 그누보드 쓰면 다 그 현상이 보이더라구요.
슬라이더 문제가 아니고, 원래 그누보드가 그런 것 같습니다.
그게 싫으시면 iframe 하나 짜세요.
고수분들 사이트도 다 똑같이 그렇게 움찔 거리던데, 그게 해결 방법이 있었으면 프로그래머 분들이 벌써 해결하셨겠죠.
준 대기업 사이트도 똑같이 그래서, 저는 그거보고 아, 이 사이트도 그누보드구나 하고 view source code 해서 보면 100% 그누보드더라구요.
그누보드에 특징이라고 할까요?
슬라이더 문제가 아니고, 원래 그누보드가 그런 것 같습니다.
그게 싫으시면 iframe 하나 짜세요.
고수분들 사이트도 다 똑같이 그렇게 움찔 거리던데, 그게 해결 방법이 있었으면 프로그래머 분들이 벌써 해결하셨겠죠.
준 대기업 사이트도 똑같이 그래서, 저는 그거보고 아, 이 사이트도 그누보드구나 하고 view source code 해서 보면 100% 그누보드더라구요.
그누보드에 특징이라고 할까요?