본문 바로가기

Programming/php 프로젝트

이미지 슬라이드 디비 연동

### 설명 ###
1) 디비에서 최근 게시물 5개를 퍼온 예제입니다. $howmany : 갯수, $id : 게시판이름
2) 이미지를 클릭하면 해당 게시물로 이동합니다.
3) 이미지를 file#1 로 업로드 하는 스킨을 기준으로 했습니다. file#2의 이미지를 뽑아오려면 소스중 filename1 대신 filename2 라고 써주시면 됩니다.
4) 3000 은 트랜지션 스피드 입니다. 적절히 조절하세요.
5) 퍼올 최근 이미지 갯수는 마음대로 바꿀 수 있습니다.




1) 적용할 페이지 맨위에 아웃로그인용 5줄짜리 소스를 넣습니다.(이미 되어 있으면 통과)


2) head 사이에 다음 스크립트를 넣어주세요.

<script language="JavaScript1.1">
<!-- Original script : http://www.donga.com [새창에서 열기] -->
<?
$howmany = 5;
$id = emotaper;
$many = $howmany - 1;
?>
var slidespeed=3000

//이미지 경로
var slideimages=new Array(<?
$result = mysql_query("select * from zetyx_board_$id where headnum >-2000000000 order by no desc limit $howmany", $connect) or die(mysql_error());
$i = 0;
while($i < $howmany) {
        $data=mysql_fetch_array($result);
        if(eregi("\.gif|\.jpg",$data[file_name1])) $filename = $_zb_url.$data[file_name1];
        else $filename="";
        echo "\"".$filename."\"";
        if($i < $many) echo ",";
        $i++;
}
?>
);


//이미지 제목
var slidecaption = new Array(<?
$result = mysql_query("select * from zetyx_board_$id where headnum >-2000000000 order by no desc limit $howmany", $connect) or die(mysql_error());
$i = 0;
while($i < $howmany) {
        $data=mysql_fetch_array($result);
        if($data[subject]) {
                $subject = $data[subject];
                echo "\"".$subject."\"";
        }        else {
                echo "";
        }
        if($i < $many) echo ",";
        $i++;
}
?>
);


//클릭시 이동 URL
var slidelinks=new Array(<?
$result = mysql_query("select * from zetyx_board_$id where headnum >-2000000000 order by no desc limit $howmany", $connect) or die(mysql_error());
$setup = mysql_fetch_array(mysql_query("select use_alllist from $admin_table where name='$id'"));
        if($setup[use_alllist]) $target = "zboard.php?id=".$id;
        else $target = "view.php?id=".$id;
$i = 0;
while($i < $howmany) {
        $data=mysql_fetch_array($result);
        echo "\"".$_zb_url.$target."&no=".$data[no]."\"";
        if($i < $many) echo ",";
        $i++;
}
?>
);


var newwindow=1

var imageholder=new Array()
var ie=document.all
for (i=0;i<slideimages.length;i++){
        imageholder=new Image();
        imageholder.src=slideimages;

}
function origin_img(){
        showPicture(slidelinks[whichlink],slidecaption[whichlink]);
}

function showPicture(src,caption) {
  window.location=src;
  return;
}

</script>




3) 최근갤러리 이미지를 표시하고 싶은 곳에 다음을 넣으세요.

<table width="200" border="0" cellspacing="0" cellpadding="0">
<tr><td><a href="javascript:origin_img()"><img src=# name="slide" style="filter:blendTrans(duration=0)" border=0 vsapce=2 width=200 height=160></a></td></tr>
<tr><td height="15" valign="bottom"><font size=2><font color="#000000"><div id='img_caption'>캡션이미지 위치입니다.</div></font></a></font></td></tr>
</table>
<script language="JavaScript1.1">
var whichlink=0
var whichimage=0
var blenddelay=(ie)? document.images.slide.filters[0].duration*1000 : 0
function slideit(){
        if (!document.images) return
        if (ie) document.images.slide.filters[0].apply();
        document.images.slide.src=imageholder[whichimage].src
        img_caption.innerHTML = slidecaption[whichimage]
        if (ie) document.images.slide.filters[0].play()
        whichlink=whichimage
        whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
        setTimeout("slideit()",slidespeed+blenddelay)
}
slideit()
</script>