มาเปลี่ยนภาพพร้อมกับข้อมูลกันเถอะ Flexi slideshow
คือ ได้รับคำสั่งมา ให้เปลี่ยน ช่องสินค้าใหม่ ให้เป็นสไลด์ แต่ด้วยความรู้อันน้อยนิด และนิดน้อย ก็เลยไปหาสคริปมา(ต้องขอบคุณ เพื่อนโอ๊ต ที่คอยให้คำปรึกษา)
พอเจอสคริปที่ต้องการแล้ว แต่…. มันยังมีปัญหา ว่าจะทำยังไงให้ดึงฐานข้อมูลมาใช้ ก้เลย มั่วๆไป บวกกับ ไม่ค่อยถนัด java script ด้วย ดูๆแล้วอาจจะ งงๆ บ้างนะคับ ^^
เริ่มจากไปเอาสคริปมา จาก http://www.dynamicdrive.com/dynamicindex14/flexislide.htm
แล้วก็มายำๆๆ
ได้แบบนี้ครับ
<? //ดึงข้อมูลออกมาก่อน ดดยเก็บไว้ใน array
include “connect.php”;
$sql_new=”select * from tb_products where new=’yes’ order by no desc limit 6″;
$dbquery_new=mysql_db_query($dbname,$sql_new);
$num_rows=mysql_num_rows($dbquery_new);
while($res=mysql_fetch_array($dbquery_new))
{
$gid[]=$res[group_id];
$tid[]=$res[type_id];
$bid[]=$res[brand_id];
$no[]=$res[no];
$oska_model[]=$res[oska_model];
$picture[]=$res[picture];
$price_retail[]=$res[price_retail];
$sql_br=”select brand_name from brand where brand_id=’$res[brand_id]‘”;
$query_br=mysql_db_query($dbname,$sql_br);
$res_br=mysql_fetch_array($query_br);
$brand_name[]=$res_br[brand_name];
$sql_tp=”select group_name from product_group where group_id=’$res[group_id]‘”;
$query_tp=mysql_db_query($dbname,$sql_tp);
$res_tp=mysql_fetch_array($query_tp);
$group_name[]=$res_tp[group_name];
}
?>
<script language=”JavaScript1.2″>
/***********************************************
* Flexi Slideshow- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
var variableslide=new Array()
//variableslide[x]=["path to image", "OPTIONAL link for image", "OPTIONAL text description (supports HTML tags)"] ตรงนี้เนื่องจากผมไม่ค่อยถนัด java script เลยทำให้มันรันอัตโนมัติไมได้
variableslide[0]=['show_image.php?filename=products_image/<?=$picture[0]?>&width=200′
, ‘product_detail.php?gid=<?=$gid[0]?>&tid=<?=$tid[0]?>&bid=<?=$bid[0]?>&no=<?=$no[0]?>&new_p=1′
, ‘<img src=images/bullet_red.gif border=0 > <?=$group_name[0]?>’
, ‘<br><img src=images/bullet_red.gif border=0 > <?=$brand_name[0]?>’
, ‘<br><img src=images/bullet_red.gif border=0 > <?=$oska_model[0]?>’
, ‘<br><br><a href=\”product_detail.php?gid=<?=$gid[0]?>&tid=<?=$tid[0]?>&bid=<?=$bid[0]?>&no=<?=$no[0]?>&new_p=1\”><img src=images/props.gif border=0 alt=คลิกเพื่อดูรายละเอียด ></a> <strong>Price</strong><span class=\”warning\”><?=$price_retail[0]?> </span><strong>Baht </strong>’]
variableslide[1]=['show_image.php?filename=products_image/<?=$picture[1]?>&width=200′
, ‘product_detail.php?gid=<?=$gid[1]?>&tid=<?=$tid[1]?>&bid=<?=$bid[1]?>&no=<?=$no[1]?>&new_p=1′
, ‘<img src=images/bullet_red.gif border=0 > <?=$group_name[1]?>’
, ‘<br><img src=images/bullet_red.gif border=0 > <?=$brand_name[1]?>’
, ‘<br><img src=images/bullet_red.gif border=0 > <?=$oska_model[1]?>’
, ‘<br><br><a href=\”product_detail.php?gid=<?=$gid[1]?>&tid=<?=$tid[1]?>&bid=<?=$bid[1]?>&no=<?=$no[1]?>&new_p=1\”><img src=images/props.gif border=0 alt=คลิกเพื่อดูรายละเอียด ></a> <strong>Price</strong><span class=\”warning\”><?=$price_retail[1]?> </span><strong>Baht </strong>’]
variableslide[2]=['show_image.php?filename=products_image/<?=$picture[2]?>&width=200′
, ‘product_detail.php?gid=<?=$gid[2]?>&tid=<?=$tid[2]?>&bid=<?=$bid[2]?>&no=<?=$no[2]?>&new_p=1′
, ‘<img src=images/bullet_red.gif border=0 > <?=$group_name[2]?>’
, ‘<br><img src=images/bullet_red.gif border=0 > <?=$brand_name[2]?>’
, ‘<br><img src=images/bullet_red.gif border=0 > <?=$oska_model[2]?>’
, ‘<br><br><a href=\”product_detail.php?gid=<?=$gid[2]?>&tid=<?=$tid[2]?>&bid=<?=$bid[2]?>&no=<?=$no[2]?>&new_p=1\”><img src=images/props.gif border=0 alt=คลิกเพื่อดูรายละเอียด ></a> <strong>Price</strong><span class=\”warning\”><?=$price_retail[2]?> </span><strong>Baht </strong>’]
variableslide[3]=['show_image.php?filename=products_image/<?=$picture[3]?>&width=200′
, ‘product_detail.php?gid=<?=$gid[3]?>&tid=<?=$tid[3]?>&bid=<?=$bid[3]?>&no=<?=$no[3]?>&new_p=1′
, ‘<img src=images/bullet_red.gif border=0 > <?=$group_name[3]?>’
, ‘<br><img src=images/bullet_red.gif border=0 > <?=$brand_name[3]?>’
, ‘<br><img src=images/bullet_red.gif border=0 > <?=$oska_model[3]?>’
, ‘<br><br><a href=\”product_detail.php?gid=<?=$gid[3]?>&tid=<?=$tid[3]?>&bid=<?=$bid[3]?>&no=<?=$no[3]?>&new_p=1\”><img src=images/props.gif border=0 alt=คลิกเพื่อดูรายละเอียด ></a> <strong>Price</strong><span class=\”warning\”><?=$price_retail[3]?> </span><strong>Baht </strong>’]
variableslide[4]=['show_image.php?filename=products_image/<?=$picture[4]?>&width=200′
, ‘product_detail.php?gid=<?=$gid[4]?>&tid=<?=$tid[4]?>&bid=<?=$bid[4]?>&no=<?=$no[4]?>&new_p=1′
, ‘<img src=images/bullet_red.gif border=0 > <?=$group_name[4]?>’
, ‘<br><img src=images/bullet_red.gif border=0 > <?=$brand_name[4]?>’
, ‘<br><img src=images/bullet_red.gif border=0 > <?=$oska_model[4]?>’
, ‘<br><br><a href=\”product_detail.php?gid=<?=$gid[4]?>&tid=<?=$tid[4]?>&bid=<?=$bid[4]?>&no=<?=$no[4]?>&new_p=1\”><img src=images/props.gif border=0 alt=คลิกเพื่อดูรายละเอียด ></a> <strong>Price</strong><span class=\”warning\”><?=$price_retail[4]?> </span><strong>Baht </strong>’]
variableslide[5]=['show_image.php?filename=products_image/<?=$picture[5]?>&width=200′
, ‘product_detail.php?gid=<?=$gid[5]?>&tid=<?=$tid[5]?>&bid=<?=$bid[5]?>&no=<?=$no[5]?>&new_p=1′
, ‘<img src=images/bullet_red.gif border=0 > <?=$group_name[5]?>’
, ‘<br><img src=images/bullet_red.gif border=0 > <?=$brand_name[5]?>’
, ‘<br><img src=images/bullet_red.gif border=0 > <?=$oska_model[5]?>’
, ‘<br><br><a href=\”product_detail.php?gid=<?=$gid[5]?>&tid=<?=$tid[5]?>&bid=<?=$bid[5]?>&no=<?=$no[5]?>&new_p=1\”><img src=images/props.gif border=0 alt=คลิกเพื่อดูรายละเอียด ></a> <strong>Price</strong><span class=\”warning\”><?=$price_retail[5]?> </span><strong>Baht </strong>’]
//configure the below 3 variables to set the dimension/background color of the slideshow
var slidewidth=’500px’ //set to width of LARGEST image in your slideshow
var slideheight=’160px’ //set to height of LARGEST iamge in your slideshow, plus any text description
var slidebgcolor=’#F3F3F3′
//configure the below variable to determine the delay between image rotations (in miliseconds)
var slidedelay=4000
////Do not edit pass this line////////////////
var ie=document.all
var dom=document.getElementById
for (i=0;i<variableslide.length;i++){
var cacheimage=new Image()
cacheimage.src=variableslide[i][0]
}
var currentslide=0
//ส่วนนี้ไว้จัดการแสดงผลครับ
function rotateimages(){
contentcontainer=’<left>’
if (variableslide[currentslide][1]!=”")
contentcontainer+=’<a href=”‘+variableslide[currentslide][1]+’”>’
contentcontainer+=’<img src=”‘+variableslide[currentslide][0]+’” border=”0″ vspace=”3″ hspace=”10″ align=”left” alt=”คลิกเพื่อดูรายละเอียด” >’
if (variableslide[currentslide][1]!=”")
contentcontainer+=’</left>’
contentcontainer+=’</a>’
if (variableslide[currentslide][2]!=”")
contentcontainer+=variableslide[currentslide][2]
if (variableslide[currentslide][3]!=”")
contentcontainer+=variableslide[currentslide][3]
if (variableslide[currentslide][4]!=”")
contentcontainer+=variableslide[currentslide][4]
if (variableslide[currentslide][5]!=”")
contentcontainer+=variableslide[currentslide][5]
if (document.layers){
crossrotateobj.document.write(contentcontainer)
crossrotateobj.document.close()
}
else if (ie||dom)
crossrotateobj.innerHTML=contentcontainer
if (currentslide==variableslide.length-1) currentslide=0
else currentslide++
setTimeout(”rotateimages()”,slidedelay)
}
if (ie||dom)
document.write(’<div id=”slidedom” style=”width:’+slidewidth+’;height:’+slideheight+’; background-color:’+slidebgcolor+’”></div>’)
function start_slider(){
crossrotateobj=dom? document.getElementById(”slidedom”) : ie? document.all.slidedom : document.slidensmain.document.slidenssub
if (document.layers)
document.slidensmain.visibility=”show”
rotateimages()
}
if (ie||dom)
start_slider()
else if (document.layers)
window.onload=start_slider
</script>
ดูตัวอย่างได้ที่ http://www.oskabatt.com/web/index.php
Tags: Java Script