이미지 슬라이드
아래의 소스는 주로 쇼핑몰 사이트에서 메인화면에 등록된 상품 이미지를 슬라이드 형식으로 출력하는 형식으로 많이 사용되는 부분일겁니다.
메타 태그를 사용할때 10개를 출력을 시키면 다시 처음으로 되돌아 갈때 공백부분이 보이지만 아래 소스는 그런 경우가 없이 자연스럽게 슬라이드 됩니다.
자바스크립 소스를 사용해서 이렇게 디비의 내용을 추출해서 사용할 수 있구나 하시고 참고해 보시면 좋을듯 싶내요..
실행방법은 아래 소스를 보시고 사용자 정보를 기재후에 원하는 파일명으로 만든 다음에 업로드를 합니다.
출력하고자 하는 부분에 인쿠르드를 하시면 되겠습니다..
메타 태그를 사용할때 10개를 출력을 시키면 다시 처음으로 되돌아 갈때 공백부분이 보이지만 아래 소스는 그런 경우가 없이 자연스럽게 슬라이드 됩니다.
자바스크립 소스를 사용해서 이렇게 디비의 내용을 추출해서 사용할 수 있구나 하시고 참고해 보시면 좋을듯 싶내요..
실행방법은 아래 소스를 보시고 사용자 정보를 기재후에 원하는 파일명으로 만든 다음에 업로드를 합니다.
출력하고자 하는 부분에 인쿠르드를 하시면 되겠습니다..
<? //디비정보
$_zb_url = "제로보드가 설치된 url";
$_zb_path = "제로보드가 설치된 절대경로";
include $_zb_path."outlogin.php";
$lanks = 10; // 뽑을 갯수
$bidg = 적용할 게시판 이름; // 추출할 게시판 이름
$result5= mysql_query("select * from zetyx_board_$bidg order by no desc limit $lanks") or die(mysql_error());
?>
<script type="text/javascript">
var sliderwidth="342px" // 가로넓이
var sliderheight="100px" // 세로 높이
var slidespeed=1 // 슬라이드 스피드 수치가 높으면 속도업
slidebgcolor="#f8f8f8" // 이미지뒤에 배경색
var leftrightslide=new Array()
var finalslide=''
<?
$j=0;
while($data2=mysql_fetch_array($result5)) {
$no = stripslashes($data2[no]);
$file = stripslashes($data2[file_name1]);
$data[subject] = cut_str($data2[subject], 10); //제목글자 10자로 자르기
$subject = strip_tags(stripslashes($data2[subject]));
if(eregi("\.gif|\.jpg",$data2[file_name1])) $filename = $_zb_url.$data2[file_name1];
elseif(eregi("\.gif|\.jpg",$data2[file_name2])) $filename = $_zb_url.$data2[file_name2];
else $filename="<img src='https://홈주소/노이미지용파일 이름 width='100' height='90' border=0 />";
if($filename) {
?>
leftrightslide[<?=$j?>]='<a href="<?=$_zb_url?>zboard.php?id=<?=$bidg?>&no=<?=$no?>"><img src="<?=$filename?>" width="100" height="90" border=0 align=absmiddle /></a> '
<?
}
$j++;
}
?>
var imagegap=" "
var slideshowgap=5
var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide
function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap
if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:5px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:5px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<span width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<span name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></span>')
write('<span name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></span>')
write('</span >')
}
document.write('</td></table>')
}
}
</script>
글출처 : Tip Korea$_zb_url = "제로보드가 설치된 url";
$_zb_path = "제로보드가 설치된 절대경로";
include $_zb_path."outlogin.php";
$lanks = 10; // 뽑을 갯수
$bidg = 적용할 게시판 이름; // 추출할 게시판 이름
$result5= mysql_query("select * from zetyx_board_$bidg order by no desc limit $lanks") or die(mysql_error());
?>
<script type="text/javascript">
var sliderwidth="342px" // 가로넓이
var sliderheight="100px" // 세로 높이
var slidespeed=1 // 슬라이드 스피드 수치가 높으면 속도업
slidebgcolor="#f8f8f8" // 이미지뒤에 배경색
var leftrightslide=new Array()
var finalslide=''
<?
$j=0;
while($data2=mysql_fetch_array($result5)) {
$no = stripslashes($data2[no]);
$file = stripslashes($data2[file_name1]);
$data[subject] = cut_str($data2[subject], 10); //제목글자 10자로 자르기
$subject = strip_tags(stripslashes($data2[subject]));
if(eregi("\.gif|\.jpg",$data2[file_name1])) $filename = $_zb_url.$data2[file_name1];
elseif(eregi("\.gif|\.jpg",$data2[file_name2])) $filename = $_zb_url.$data2[file_name2];
else $filename="<img src='https://홈주소/노이미지용파일 이름 width='100' height='90' border=0 />";
if($filename) {
?>
leftrightslide[<?=$j?>]='<a href="<?=$_zb_url?>zboard.php?id=<?=$bidg?>&no=<?=$no?>"><img src="<?=$filename?>" width="100" height="90" border=0 align=absmiddle /></a> '
<?
}
$j++;
}
?>
var imagegap=" "
var slideshowgap=5
var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide
function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup
function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px"
if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px"
}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap
if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}
if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:5px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:5px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<span width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<span name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></span>')
write('<span name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></span>')
write('</span >')
}
document.write('</td></table>')
}
}
</script>