갤러리 롤링되는 jquery인데요 모르겠내요 정보
갤러리 롤링되는 jquery인데요 모르겠내요본문
이미지는 잘되는데요 이미지제목을 추가해서 같이 롤링되게 할려구 하는데요 모르겠내요.
좀 가르처주세요.
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
$img_width = '154'; //이미지 가로길이
$img_height = '128'; //이미지 세로길이
$speed = '500'; //화면이동속도
$speed2 = '3000'; //화면정지시간
$top = '0'; //상단공백 px
$right = '0'; //좌측공백 px
$img_quality = '9'; //퀼리티 100이하로 설정
Global $_GLOBAL;
if (!function_exists("imagecopyresampled")) alert("GD 2.0.1 이상 버전이 설치되어 있어야 사용할 수 있습니다.");
$data_path = $g4[path]."/data/file/$bo_table";
$thumb_path = $data_path.'/thumb_ofo'; //썸네일 이미지 생성 디렉토리
@mkdir($thumb_path, 0707);
@chmod($thumb_path, 0707);
?>
<style type="text/css">
/* body {
background: #222;
margin: 0; padding: 0;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}*/
*{outline: none;}
img {border: 0;}
.container {
width: <?=$img_width?>px;
padding: 0;
margin: 0 auto;
}
/* .folio_block {
position: absolute;
left: <?=$left?>px; top: <?=$top?>px;
border: 3px solid #FF0000;
}
*/
/*--Main Container--*/
.main_view {
float: right;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:<?=$img_height?>px; width: <?=$img_width+6?>px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
top: 0; right:3;
}
.image_reel {
position: absolute;
top: 0; right:0;
}
.windows {
height:16px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
top: 0; right:3;
}
.image_reels {
position: absolute;
top: 140; right:0;
}
.image_reel img {
top: 0; float: right;
}
/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 0px; right: 154px;
width: 154px; height:128px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
/* line-height: 40px;
background: url(<?=$latest_skin_path?>/paging_bg2.png) no-repeat;*/
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 0px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
color:#ffffff;
/* background: #920000;
border: 1px solid #610000;*/
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;color:#ffffff;}
</style>
<!--<script type="text/javascript" src="<?=$latest_skin_path?>/jquery.js"></script>-->
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
right: -image_reelPosition
}, <?=$speed?>);
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, <?=$speed2?>); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
</script>
<div class="container">
<div class="folio_block">
<div class="main_view"> <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3"><img src="../../image/main/rightbanner_top.gif" width="172" height="9" /></td>
</tr>
<tr>
<td><img src="../../image/main/rightbanner_body01.gif" width="9" height="154" /></td>
<td bgcolor="cfe0cf">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div class="window"><? $rd=$img_width*$i;?>
<div class="image_reel" style="width: <?=$rd?>px; right:0px;">
<? for ($i=0; $i<count($list); $i++) {
$listname[$i]=$list[$i][wr_subject];
$img = "<img src='$latest_skin_path/images/noimage.gif' width='$img_width' height='$img_height' title='이미지 없음' />";
$thumb = $thumb_path.'/'.$list[$i][wr_id];
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
break;
$rate = $img_width / $size[0];
$height = (int)($size[1] * $rate);
// 계산된 썸네일 이미지의 높이가 설정된 이미지의 높이보다 작다면
if ($height < $img_height)
// 계산된 이미지 높이로 복사본 이미지 생성
$dst = imagecreatetruecolor($img_width, $height);
else
// 설정된 이미지 높이로 복사본 이미지 생성
$dst = imagecreatetruecolor($img_width, $img_height);
imagecopyresampled($dst, $src, 0, 0, 0, 0, $img_width, $height, $size[0], $size[1]);
imagepng($dst, $thumb_path.'/'.$list[$i][wr_id], $img_quality);
chmod($thumb_path.'/'.$list[$i][wr_id], 0606);
}
}
if (file_exists($thumb)){
$img = "<img src='$thumb' width='$img_width' height='$img_height' alt=\"{$list[$i][subject]}\" /></a>";//<a target='_top' href='{$list[$i][href]}'>
}
?>
<?echo $img;?>
<?}?>
</div></div><div style="display: block;" class="paging">
<? for ($i=0; $i<count($list); $i++) {
$e=$i+1;
if (file_exists($thumb)){
echo "<a class='' href='' rel='$e'></a>";
}
}
?>
</div></td>
</tr>
<tr>
<td><img src="../../image/main/rightbanner_body03.gif" width="154" height="9" /></td>
</tr>
<tr>
<td height="17" align="center" valign="bottom" background="../../image/inc/rb_bg.jpg"><!--배너제목01 -->
<div class="windows">
<div class="image_reel" ><!-- style="width: 100px; right:0px;" -->
<? for ($i=0; $i<3; $i++) {?>
<span class="style1"><?=$listname[$i]?></span>
<?}?></div></div>
</td>
</tr>
</table></td>
<td><img src="../../image/main/rightbanner_body02.gif" width="9" height="154" /></td>
</tr>
<tr>
<td colspan="3"><img src="../../image/main/rightbanner_bottom.gif" width="172" height="6" /></td>
</tr>
</table>
</div>
</div>
</div>
좀 가르처주세요.
<?
if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
$img_width = '154'; //이미지 가로길이
$img_height = '128'; //이미지 세로길이
$speed = '500'; //화면이동속도
$speed2 = '3000'; //화면정지시간
$top = '0'; //상단공백 px
$right = '0'; //좌측공백 px
$img_quality = '9'; //퀼리티 100이하로 설정
Global $_GLOBAL;
if (!function_exists("imagecopyresampled")) alert("GD 2.0.1 이상 버전이 설치되어 있어야 사용할 수 있습니다.");
$data_path = $g4[path]."/data/file/$bo_table";
$thumb_path = $data_path.'/thumb_ofo'; //썸네일 이미지 생성 디렉토리
@mkdir($thumb_path, 0707);
@chmod($thumb_path, 0707);
?>
<style type="text/css">
/* body {
background: #222;
margin: 0; padding: 0;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}*/
*{outline: none;}
img {border: 0;}
.container {
width: <?=$img_width?>px;
padding: 0;
margin: 0 auto;
}
/* .folio_block {
position: absolute;
left: <?=$left?>px; top: <?=$top?>px;
border: 3px solid #FF0000;
}
*/
/*--Main Container--*/
.main_view {
float: right;
position: relative;
}
/*--Window/Masking Styles--*/
.window {
height:<?=$img_height?>px; width: <?=$img_width+6?>px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
top: 0; right:3;
}
.image_reel {
position: absolute;
top: 0; right:0;
}
.windows {
height:16px;
overflow: hidden; /*--Hides anything outside of the set width/height--*/
position: relative;
top: 0; right:3;
}
.image_reels {
position: absolute;
top: 140; right:0;
}
.image_reel img {
top: 0; float: right;
}
/*--Paging Styles--*/
.paging {
position: absolute;
bottom: 0px; right: 154px;
width: 154px; height:128px;
z-index: 100; /*--Assures the paging stays on the top layer--*/
text-align: center;
/* line-height: 40px;
background: url(<?=$latest_skin_path?>/paging_bg2.png) no-repeat;*/
display: none; /*--Hidden by default, will be later shown with jQuery--*/
}
.paging a {
padding: 0px;
text-decoration: none;
color: #fff;
}
.paging a.active {
font-weight: bold;
color:#ffffff;
/* background: #920000;
border: 1px solid #610000;*/
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
}
.paging a:hover {font-weight: bold;color:#ffffff;}
</style>
<!--<script type="text/javascript" src="<?=$latest_skin_path?>/jquery.js"></script>-->
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");
//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".window").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;
//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});
//Paging + Slider Function
rotate = function(){
var triggerID = $active.attr("rel") - 1; //Get number of times to slide
var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide
$(".paging a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
right: -image_reelPosition
}, <?=$speed?>);
};
//Rotation + Timing Event
rotateSwitch = function(){
play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active = $('.paging a.active').next();
if ( $active.length === 0) { //If paging reaches the end...
$active = $('.paging a:first'); //go back to first
}
rotate(); //Trigger the paging and slider function
}, <?=$speed2?>); //Timer speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run function on launch
//On Hover
$(".image_reel a").hover(function() {
clearInterval(play); //Stop the rotation
}, function() {
rotateSwitch(); //Resume rotation
});
//On Click
$(".paging a").click(function() {
$active = $(this); //Activate the clicked paging
//Reset Timer
clearInterval(play); //Stop the rotation
rotate(); //Trigger rotation immediately
rotateSwitch(); // Resume rotation
return false; //Prevent browser jump to link anchor
});
});
</script>
<div class="container">
<div class="folio_block">
<div class="main_view"> <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3"><img src="../../image/main/rightbanner_top.gif" width="172" height="9" /></td>
</tr>
<tr>
<td><img src="../../image/main/rightbanner_body01.gif" width="9" height="154" /></td>
<td bgcolor="cfe0cf">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div class="window"><? $rd=$img_width*$i;?>
<div class="image_reel" style="width: <?=$rd?>px; right:0px;">
<? for ($i=0; $i<count($list); $i++) {
$listname[$i]=$list[$i][wr_subject];
$img = "<img src='$latest_skin_path/images/noimage.gif' width='$img_width' height='$img_height' title='이미지 없음' />";
$thumb = $thumb_path.'/'.$list[$i][wr_id];
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
break;
$rate = $img_width / $size[0];
$height = (int)($size[1] * $rate);
// 계산된 썸네일 이미지의 높이가 설정된 이미지의 높이보다 작다면
if ($height < $img_height)
// 계산된 이미지 높이로 복사본 이미지 생성
$dst = imagecreatetruecolor($img_width, $height);
else
// 설정된 이미지 높이로 복사본 이미지 생성
$dst = imagecreatetruecolor($img_width, $img_height);
imagecopyresampled($dst, $src, 0, 0, 0, 0, $img_width, $height, $size[0], $size[1]);
imagepng($dst, $thumb_path.'/'.$list[$i][wr_id], $img_quality);
chmod($thumb_path.'/'.$list[$i][wr_id], 0606);
}
}
if (file_exists($thumb)){
$img = "<img src='$thumb' width='$img_width' height='$img_height' alt=\"{$list[$i][subject]}\" /></a>";//<a target='_top' href='{$list[$i][href]}'>
}
?>
<?echo $img;?>
<?}?>
</div></div><div style="display: block;" class="paging">
<? for ($i=0; $i<count($list); $i++) {
$e=$i+1;
if (file_exists($thumb)){
echo "<a class='' href='' rel='$e'></a>";
}
}
?>
</div></td>
</tr>
<tr>
<td><img src="../../image/main/rightbanner_body03.gif" width="154" height="9" /></td>
</tr>
<tr>
<td height="17" align="center" valign="bottom" background="../../image/inc/rb_bg.jpg"><!--배너제목01 -->
<div class="windows">
<div class="image_reel" ><!-- style="width: 100px; right:0px;" -->
<? for ($i=0; $i<3; $i++) {?>
<span class="style1"><?=$listname[$i]?></span>
<?}?></div></div>
</td>
</tr>
</table></td>
<td><img src="../../image/main/rightbanner_body02.gif" width="9" height="154" /></td>
</tr>
<tr>
<td colspan="3"><img src="../../image/main/rightbanner_bottom.gif" width="172" height="6" /></td>
</tr>
</table>
</div>
</div>
</div>
댓글 전체
저것을 출력하면 이미지가 1 2 3 있으면 이미지1 2 3 제목이 한번에 출려되서 이미지 2번에 1 2 3 제목이 출력되서 움직이는 상태에요