최근 게시물에 이미지가 자바스크립트로 한장 한장 바뀌는 소스입니다.

 

최근글 소스는 아래와 같습니다.

 

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

if (!$board[bo_3]) alert("해당 게시판 설정 : 여분 필드 3 에 목록에서 보여질 이미지의 가로사이즈를 입력하십시오.");
if (!$board[bo_4]) alert("해당 게시판 설정 : 여분 필드 4 에 목록에서 보여질 이미지의 세로사이즈를 하십시오.");
if (!$board[bo_5]) alert("해당 게시판 설정 : 여분 필드 5 에 목록에서 보여질 이미지의 바뀌는 시간을 입력하십시오. (1초는 1000, 2초는 2000)");
if (!$board[bo_9]) alert("해당 게시판 설정 : 여분 필드 9 에 목록에서 보여질 이미지의 질(quality)을 비율로 설정하십시오. (100 이하)");
if (!function_exists("imagecopyresampled")) alert("GD 2.0.1 이상 버전이 설치되어 있어야 사용할 수 있는 스킨 입니다.");

$data_path = $g4[path]."/data/file/$bo_table";
$thumb_path = $data_path.'/thumb{$board[bo_3]}';

@mkdir($thumb_path, 0707);
@chmod($thumb_path, 0707);

$sec_delay = $board[bo_5];
?>

<!-- <?=$board[bo_subject]?> (<?=$board[bo_table]?>) 최신글 -->
<table width="100%" cellpadding="0" cellspacing="0" border="0" align="center">
<tr><td align="center">
<?
for ($i=0; $i<count($list); $i++)
{
    $img = "<img src='$latest_skin_path/img/no_image.gif' border=0 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
                continue;

            $rate = $board[bo_3] / $size[0];
            $height = (int)($size[1] * $rate);

            if ($height < $board[bo_4])
                $dst = imagecreatetruecolor($board[bo_3], $height);
            else
                $dst = imagecreatetruecolor($board[bo_3], $board[bo_4]);
            imagecopyresampled($dst, $src, 0, 0, 0, 0, $board[bo_3], $height, $size[0], $size[1]);
            imagepng($dst, $thumb_path.'/'.$list[$i][wr_id], $board[bo_9]);
            chmod($thumb_path.'/'.$list[$i][wr_id], 0606);
        }
    }

    if (file_exists($thumb))
        $img = "<img src='$thumb' border=0>";

    $href = "$g4[bbs_path]/board.php?bo_table=$bo_table";

$body_data = "
        <table id=id_s".$i." style='display:none' border='0' cellpadding='0' cellspacing='0' align='center'>
 <tr>
            <td align=center style='border:1px; solid #CCCCCC; padding:3px;'>{$img}</td>
 </tr>
 
 </table>
";
echo $body_data;
}
?>

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

 

<script language='JavaScript'>
var oldshow = 1;
var showid = 1;
function ssh_init() {
 eval("document.all.id_s"+oldshow+".style.display='none'");
 eval("document.all.id_s"+showid+".style.display='block'");

 oldshow = showid;

 showid++;
 if (showid><?=$i-1?>) showid=0;

 setTimeout("ssh_init()", <?=$sec_delay?>);
}
</script>

<script language='JavaScript'>
<? if (count($list)>0){ echo "ssh_init();"; } ?>
</script>

 

최근글 소스 끝

 

위의 소스는 사진이 한장씩 보여지고 사라집니다.

아래의 자바스크립을 적용하고 싶은데... 저 실력으로는 잘 안되네요.

 

적용하고 싶은 자바스크립 내용 은 아래의 소스이며, 이미지가 부드럽게

전환되는 소스 입니다. 위의 최근글 소스에 아래의 자바스크립트를 적용하고 싶어요.

도움 부탁 드립니다.

 

<script language="JavaScript1.2">
var slideshow_width=240 //이미지의 가로크기
var slideshow_height=225 //이미지의 높이
var pause=3000 //슬라이드 간의 시간 간격 (3000=3 seconds)

var fadeimages=new Array()

// 이미지들을 설정 하세요
fadeimages[0]="../240_5.jpg"
fadeimages[1]="../240_8.jpg"
fadeimages[2]="../240_9.jpg"

var preloadedimages=new Array()
for (p=0;p<fadeimages.length;p++){
preloadedimages[p]=new Image()
preloadedimages[p].src=fadeimages[p]
}

var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1

if (ie4||dom)
document.write('<div style="position:relative;width:'+slideshow_width+';height:'+slideshow_height+';overflow:hidden"><div  id="canvas0" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;filter:alpha(opacity=10);-moz-opacity:10"></div><div id="canvas1" style="position:absolute;width:'+slideshow_width+';height:'+slideshow_height+';top:0;filter:alpha(opacity=10);-moz-opacity:10"></div></div>')
else
document.write('<img name="defaultslide" src="'+fadeimages[0]+'">')

var curpos=10
var degree=10
var curcanvas="canvas0"
var curimageindex=0
var nextimageindex=1


function fadepic(){
if (curpos<100){
curpos+=10
if (tempobj.filters)
tempobj.filters.alpha.opacity=curpos
else if (tempobj.style.MozOpacity)
tempobj.style.MozOpacity=curpos/100
}
else{
clearInterval(dropslide)
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML='<img src="'+fadeimages[nextimageindex]+'">'
nextimageindex=(nextimageindex<fadeimages.length-1)? nextimageindex+1 : 0
setTimeout("rotateimage()",pause)
}
}

function rotateimage(){
if (ie4||dom){
resetit(curcanvas)
var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
var temp='setInterval("fadepic()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else
document.images.defaultslide.src=fadeimages[curimageindex]
curimageindex=(curimageindex<fadeimages.length-1)? curimageindex+1 : 0
}

function resetit(what){
curpos=10
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
if (crossobj.filters)
crossobj.filters.alpha.opacity=curpos
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=curpos/100
}

function startit(){
var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.innerHTML='<img src="'+fadeimages[curimageindex]+'">'
rotateimage()
}

if (ie4||dom)
window.onload=startit
else
setInterval("rotateimage()",pause)

</script>