슬라이드 최신글 관련 해서요...;; 정보
슬라이드 최신글 관련 해서요...;;본문
http://sir.co.kr/bbs/board.php?bo_table=g4_skin&wr_id=114189
위의 최신글을 같은 페이지에 두개 사용하려고 하는데 하나는 작동을 안하네요.
자바 문제라고 하는데 초보라 어디가 어떻게 문제인지 ㅜㅜ
아래 소스에서 어느 부분을 수정해야 되는지 알수 있을까요??
부탁드립니다.
최신글 파일
<?
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="<?=$latest_skin_path?>/img/right.png"></span>
<span id="btn1" style="float:right;margin:5px 5px 0 0;"><img src="<?=$latest_skin_path?>/img/left.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="skin/latest/10/img/new.png">';
$img = "<a href='{$list[$i]['href']}'><img src=\"$thumb_file_list\" border=\"0\" width=\"$img_width\" height=\"$img_height\"/><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>
자바스크립트 파일
jQuery.fn.imageScroller = function(params){
var p = params || {
next:"buttonNext",
prev:"buttonPrev",
frame:"scrollerFrame",
width:130,
child:"a",
auto:true
};
var _btnNext = $("#"+ p.next);
var _btnPrev = $("#"+ p.prev);
var _imgFrame = $("#"+ p.frame);
var _width = p.width;
var _child = p.child;
var _auto = p.auto;
var _itv;
var turnLeft = function(){
_btnPrev.unbind("click",turnLeft);
if(_auto) autoStop();
_imgFrame.animate( {marginLeft:-_width}, 'fast', '', function(){
_imgFrame.find(_child+":first").appendTo( _imgFrame );
_imgFrame.css("marginLeft",0);
_btnPrev.bind("click",turnLeft);
if(_auto) autoPlay();
});
};
var turnRight = function(){
_btnNext.unbind("click",turnRight);
if(_auto) autoStop();
_imgFrame.find(_child+":last").clone().show().prependTo( _imgFrame );
_imgFrame.css("marginLeft",-_width);
_imgFrame.animate( {marginLeft:0}, 'fast' ,'', function(){
_imgFrame.find(_child+":last").remove();
_btnNext.bind("click",turnRight);
if(_auto) autoPlay();
});
};
_btnNext.css("cursor","hand").click( turnRight );
_btnPrev.css("cursor","hand").click( turnLeft );
var autoPlay = function(){
_itv = window.setInterval(turnLeft, 4000); //·Ñ¸µ ½Ã°£ ¼³Á¤ 3000=3ÃÊ
};
var autoStop = function(){
window.clearInterval(_itv);
};
if(_auto) autoPlay();
};
위의 최신글을 같은 페이지에 두개 사용하려고 하는데 하나는 작동을 안하네요.
자바 문제라고 하는데 초보라 어디가 어떻게 문제인지 ㅜㅜ
아래 소스에서 어느 부분을 수정해야 되는지 알수 있을까요??
부탁드립니다.
최신글 파일
<?
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="<?=$latest_skin_path?>/img/right.png"></span>
<span id="btn1" style="float:right;margin:5px 5px 0 0;"><img src="<?=$latest_skin_path?>/img/left.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="skin/latest/10/img/new.png">';
$img = "<a href='{$list[$i]['href']}'><img src=\"$thumb_file_list\" border=\"0\" width=\"$img_width\" height=\"$img_height\"/><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>
자바스크립트 파일
jQuery.fn.imageScroller = function(params){
var p = params || {
next:"buttonNext",
prev:"buttonPrev",
frame:"scrollerFrame",
width:130,
child:"a",
auto:true
};
var _btnNext = $("#"+ p.next);
var _btnPrev = $("#"+ p.prev);
var _imgFrame = $("#"+ p.frame);
var _width = p.width;
var _child = p.child;
var _auto = p.auto;
var _itv;
var turnLeft = function(){
_btnPrev.unbind("click",turnLeft);
if(_auto) autoStop();
_imgFrame.animate( {marginLeft:-_width}, 'fast', '', function(){
_imgFrame.find(_child+":first").appendTo( _imgFrame );
_imgFrame.css("marginLeft",0);
_btnPrev.bind("click",turnLeft);
if(_auto) autoPlay();
});
};
var turnRight = function(){
_btnNext.unbind("click",turnRight);
if(_auto) autoStop();
_imgFrame.find(_child+":last").clone().show().prependTo( _imgFrame );
_imgFrame.css("marginLeft",-_width);
_imgFrame.animate( {marginLeft:0}, 'fast' ,'', function(){
_imgFrame.find(_child+":last").remove();
_btnNext.bind("click",turnRight);
if(_auto) autoPlay();
});
};
_btnNext.css("cursor","hand").click( turnRight );
_btnPrev.css("cursor","hand").click( turnLeft );
var autoPlay = function(){
_itv = window.setInterval(turnLeft, 4000); //·Ñ¸µ ½Ã°£ ¼³Á¤ 3000=3ÃÊ
};
var autoStop = function(){
window.clearInterval(_itv);
};
if(_auto) autoPlay();
};
댓글 전체
저만 글씨 깨지나요? 음.........
<script type="text/javascript">
$(function(){
$("#scroller").imageScroller({
next:"btn1", //´ÙÀ½ ¹öÆ° ID°ª
prev:"btn2", //ÀÌÀü ¹öÆ° ID°ª
frame:"scrollerFrame", //½ºÅ©·Ñ·¯ ÇÁ·¹ÀÓ ID°ª
width:160, //À̹ÌÁö °¡·Î Å©±â
child:"li", //½ºÅ©·Ñ ÁöÁ¤ ű×
auto:true //¿ÀÅä ·Ñ¸µ (ÇØÁ¦´Â false)
});
});
</script>
여기 보시면 imageScroller 를 가져옵니다. var imageScroller 로 쓰인 자바를 가져오는거죠.
그냥 간단하게 설명드리면 위에 부분이랑 자바 부분 복사하셔서 2개로 만들어주시고
imageScroller 를 imageScroller2 로 변경하세요.
("#scroller") 이거는 div 아이디 값입니다, 얘도 ("#scroller2"). 변경해주시구요.
스크립트가 겹쳐서 오류나거나 두개가 같이 움직이는 현상이 있을 수 있습니다.
이런건 id 값과 변수명만 고쳐주시면 두개든 세개든 하실 수 있어요.
원래 funtion 에서 i 값줘서 배열하면 편하지만 두개만 사용하시면 그냥 이렇게 하세요 ㅋ
<script type="text/javascript">
$(function(){
$("#scroller").imageScroller({
next:"btn1", //´ÙÀ½ ¹öÆ° ID°ª
prev:"btn2", //ÀÌÀü ¹öÆ° ID°ª
frame:"scrollerFrame", //½ºÅ©·Ñ·¯ ÇÁ·¹ÀÓ ID°ª
width:160, //À̹ÌÁö °¡·Î Å©±â
child:"li", //½ºÅ©·Ñ ÁöÁ¤ ű×
auto:true //¿ÀÅä ·Ñ¸µ (ÇØÁ¦´Â false)
});
});
</script>
여기 보시면 imageScroller 를 가져옵니다. var imageScroller 로 쓰인 자바를 가져오는거죠.
그냥 간단하게 설명드리면 위에 부분이랑 자바 부분 복사하셔서 2개로 만들어주시고
imageScroller 를 imageScroller2 로 변경하세요.
("#scroller") 이거는 div 아이디 값입니다, 얘도 ("#scroller2"). 변경해주시구요.
스크립트가 겹쳐서 오류나거나 두개가 같이 움직이는 현상이 있을 수 있습니다.
이런건 id 값과 변수명만 고쳐주시면 두개든 세개든 하실 수 있어요.
원래 funtion 에서 i 값줘서 배열하면 편하지만 두개만 사용하시면 그냥 이렇게 하세요 ㅋ