freelance, web developer, web designer, hosting, domain name
<script type="text/javascript" src="http://www.goragod.com/ajax/gajax.js"></script>
คือก้เอาโค๊ดมาจากตัวอย่างอะค่ะ แบบนี้อะค่ะ
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
<title>Untitled Document</title>
<style type="text/css">
#contianer-scroll {
position: relative;
width: 370px;
height: 90px;
overflow: hidden;
border:1px solid #666666;
float: left;
}
#scroller {
position: absolute;
width:630px;
height: 80px;
}
#scroller img { /* style ของรูปภาพ */
display: inline;
margin: 5px;
}
#arrowLeft,#arrowRight { /* stylle ของ ลูกศรสำหรับเลื่อนรูปภาพ อาจใช้รูปแทนได้ */
height: 90px;
line-height: 90px;
float: left;
cursor: pointer;
}
</style>
</head>
<body>
<div id="arrowLeft"><<</div>
<div id="contianer-scroll">
<div id="scroller"><img alt="" src="images/bath.jpg" /><img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /></div>
</div>
<div id="arrowRight">>></div>
<script type="text/javascript">
new VScroll('contianer-scroll','scroller').play();
</script>
</body>
</html>
แต่มันติดเออเรอ ว่า VScoll is not defined หรือเรียงโค๊ดไม่ถูกรึป่าวค่ะ รบกวนด้วยนะค่ะ
<script type="text/javascript" src="http://www.goragod.com/ajax/gajax.js"></script>
ตอนนี้เอามาประยุกเปน แนวตั้ง อะค่ะ มันไม่สไลด์อะค่ะ
พอดีทำเปนแบบ 2 คอลัมอะค่ะ ผสมกับ table อะค่ะ แบบนี้อะค่ะ
<?
include("../config/config.php");
include("../config/connect.php");
include("../config/func.inc.php");
$sql_pic="select * from product_pic where display='1' order by level asc";
$result_pic=get_rsltset($sql_pic);
$nr_pic=count($result_pic);
?>
<script type="text/javascript" src="http://www.goragod.com/ajax/gajax.js"></script>
<style>
#contianer-scroll {
position:relative;top:10px;
width: 90px;
height: 370px;
overflow: hidden;
border:1px solid #666666;
float: left;
}
#scroller {
position: absolute;
width:80px;
height: 630px;
}
#scroller img { /* style ของรูปภาพ */
display: inline;
margin: 5px;
}
#up{position:relative; left:10px; top:5px; width:80px; height:20px; cursor: pointer; background-color:#0000FF;}
#dw{position:absolute; left:20px; bottom100px; width:80px; height:20px;cursor: pointer; background-color:#993399;}
</style>
<tr>
<td align="center"</td>
</tr>
<tr>
<td align="center"></td>
</tr>
<tr>
<td align="center">
<table width="79" border="0" cellpadding="0" cellspacing="5" bgcolor="#F5F5F5">
<tr>
<div id="up">up</div>
<div id="contianer-scroll">
<div id="scroller">
<? for($p=0;$p<$nr_pic;$p++){?><td> <img src="../images/product/<?=$result_pic[$p]['pic']?>" width="70" height="54" border="0" /></td><? if(($p+1)%2==0){ echo "<tr></tr>"; } }?>
</div>
</div>
<div id="dw">down</div>
<script type="text/javascript">
new HScroll('contianer-scroll','scroller').play();
</script>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center"></td>
</tr>
<tr>
<td align="center"><img src="images/12x12.jpg" width="12" height="12" /></td>
</tr>
</table>
คุณกำลังทดสอบอยู่บน Localhost
จากนั้นคุณเรียกใช้งาน gajax โดยอ้างอิงไปยัง http://www.goragod.com
โดย
นั่นหมายความว่า คุณกำลังร้องขอไปยังเซิร์ฟเวอร์ของเว็บ http://www.goragod.com
ปัญหาคือ ขณะที่คุณทดสอบอยู่นั้น คุณได้เชื่อมต่อ Internet อยู่หรือไม่
เสริม : #dw น่าจะกำหนด position:relative; มากกว่านะ
<div id="contianer-scroll">
<div id="scroller"><img alt="" src="images/bath.jpg" /><img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /> <img alt="" src="bath.jpg" /></div>
</div>
<div id="arrowBottom">>></div>
<script type="text/javascript">
new HScroll('contianer-scroll','scroller').play();
</script>
ตรงลูกศร ต้องใช้ arrowTop สำหรับขึ้น และ arrowBottom สำหรับลง ครับ
ส่วน CSS ก็ดู ok ครับ เพราะมันแค่ปรับ กว้างและยาว ให้เป็น แนวตั้งเท่านั้น
gajax.js สามารถโหลดมาเก็บไว้เพื่อทดสอบบนเครื่องแบบ offline ได้เลยนะครับ เวลาเรียกใช้ ก็อ้างอิง path จากตัวเครื่อง
เครื่องต่ออินเตอร์เนตค่ะ
ตอนนี้เขียน css มาใหม่ ให้มันออก 2 คอลัมต์
แต่มันไม่สไลด์อะค่ะ ไม่ทราบว่าผิดตรง css รึป่าวอะค่ะ
<?
include('config/config.php');
include('config/connect.php');
include('config/func.inc.php');
$sql_pic="select * from product_pic where display='1' order by level asc";
$result_pic=get_rsltset($sql_pic);
$nr_pic=count($result_pic);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-874" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css.css" />
<script type="text/javascript" src="http://www.goragod.com/ajax/gajax.js"></script>
<style>
#content{
margin:auto;
width:150px;
height:410px;
padding:2px;
text-align:center;
float:left;
border:1px solid #666666;
}
#contianer-scroll{
margin:auto;
width:145px;
height:400px;
padding:2px;
float:left;
clear:both;
}
#contianer-scroll #scroller{
margin:auto;
width:145px;
height:400px;
padding:2px;
float:left;
clear:both;
}
#contianer-scroll #scroller .scroller2{
margin:1px;
width:70px;
height:55px;
padding:0px;
float:left;
}
#arrowTop{ margin:auto; width:80px; height:20px; cursor: pointer; text-align:center;}
#arrowBottom{ width:80px; height:20px;cursor: pointer; clear:both; text-align:center; }
</style>
</head>
<body>
<div id="content">
<div id="arrowTop">up</div>
<div id="contianer-scroll">
<div id="scroller"><? for($p=0;$p<$nr_pic;$p++){?><div class="scroller2"><img src="images/product/<?=$result_pic[$p]['pic']?>" width="70" height="54" border="0" /></div><? }?></div>
</div>
<div id="arrowBottom">down</div>
</div>
<script type="text/javascript">
new HScroll('contianer-scroll','scroller').play();
</script>
</body>
</html>
แค่เปลี่ยนจาก
1.VScroll เป็น HScroll
2.ปุ่มเปลี่ยนเป็น #arrowTop และ #arrowBottom
3.แก้ไข CSS ของ #container-scroll และ #scroller โดยกลับ width เป็น height และ height เป็น width
นอกนั้นไม่ต้องแก้ไขอะไร แล้วทดสอบดู จากนั้นค่อยๆแก้ CSS ทีละจุดเอา
ปล. CSS ผิดมันไม่ทำงานครับ และ ความสูงของ #scroller ต้องมากกกว่า #container-scroll ครับ
** เขียนตัวอย่างให้แล้ว กลับไปดูที่บทความครับ
ทุกคนที่นี่ยินดีที่จะช่วยตอบให้
มัวแต่กลัวก็ไม่รู้กันพอดี
เพียงแต่ว่าการที่กล้าที่จะถามนั้น ต้องคิดนิดนึงว่าจะถามยังไง
มีข้อมูลประกอบในคำถามนั้นเพียงพอที่จะวิเคราะห์หาคำตอบให้
ได้มากน้อยแค่ไหน
พยามเข้านะ สู้ๆ