วันอาทิตย์ที่ 25 ธันวาคม พ.ศ. 2554

สอนทำ jQuery Slide Show แสดงรายการสินค้า

          เว็บไซต์ในปัจจุบันนี้ เราเรียกกันว่า เป็นยุคเทคโนโลยี Web 2.0 เทคโนโลยีที่ว่านี้ มันจะมีเทคนิคและคุณสมบัติ ในการทำเว็บไซต์เพิ่มเข้ามา เช่น CSS, JSON, XML, RSS,AJAX, JavaScript Framework (jQuery,Mootools) เป็นต้น ทำให้เว็บไซต์มีการDesignหน้าตาที่สวยงามและมีลูกเล่นที่ตอบสนองกับผู้ใช้งานได้เป็นอย่างดี และก่อให้เกิดธุรกิจแบบใหม่ต่างๆบนอินเตอร์เนตมากมาย เช่น Web E-Commerce ต่างๆ,เว็บข่าวสารต่างๆ, facebook , google เป็นต้น
          บทความนี้จะนำเสนอเทคนิคการทำเว็บอีกอย่างนึง คือการทำ slide show ซึ่งเราจะเห็นเกือบทุกเว็บไซต์เลยก็ว่าได้ครับ ที่มีตัว slide show นี้อยู่ในเว็บเหล่านั้น โดยอาจจะเอามาใช้แสดง Bannerโฆษณา,แสดงรูปภาพ หรืออื่นๆแล้วแต่จะนำมาประยุกต์ใช้ครับ Slide Show ตัวนี้ เราจะเขียนด้วย jQuery ครับ โดยจะเป็น Slide Show แบบเลื่อนซ้ายขวาเพื่อแสดงรายการสินค้า คุณสามารถนำเอาไปประยุกต์ใช้งานตามความต้องการของคุณได้ เช่น แสดงรายการสินค้ามาใหม่ล่าสุด,สินค้าแนะนำ,สินค้าขายดี 10 อันดับ,แสดงBannerโฆษณาบนเว็บไซต์ของคุณก็ได้ครับ

มาดูCodeกันเลยครับ สร้างไฟล์ .php ขึ้นมาแล้วให้พิมพ์ Code ตามนี้
<?php
$conn=mysql_connect('localhost','root','root');//เชื่อมต่อกับฐานข้อมูล
mysql_select_db('db_exshop');//เลื่อกฐานข้อมูล
mysql_query("SET NAMES 'utf8'");
$rsShowPd=mysql_query("SELECT * FROM tb_product ORDER BY pd_name ASC LIMIT 12");//ดึงข้อมูล12แถวจากเทเบิล
$pageTotal=ceil(mysql_num_rows($rsShowPd)/5);//หาร 5 เพราะเราจะให้แสดง สไลด์ ละ 5 รายการครับ
?>
<!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=utf-8" />
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
//2011 Script By php-for-ecommerce.blogspot.com
$tsilder=function(ele){
var _w=ele.width();
var _i=0;
var ui_w=ele.children().children().width();
ele.prev().prev('.tpage_cont').find('.tpage:first').addClass('tpage_active');
ele.prev('.nav-left').bind('click',function(e){
if(_i>0){_i-=1;}else{_i=Math.ceil(ui_w/_w)-1;}
$tslider_animate(ele,_i,_w);
$tslider_active(ele,_i+1);
});
ele.next('.nav-right').bind('click',function(e){
_i+=1;
if((_i*_w)>=ui_w){_i=0;}
$tslider_animate(ele,_i,_w);
$tslider_active(ele,_i+1);
});
ele.prev().prev('.tpage_cont').find('.tpage').bind('click',function(e){
_i=$(this).attr('pageno')-1;
$tslider_animate(ele,_i,_w);
$tslider_active(ele,_i+1);
});
ele.next().next('.tpage_cont').find('.tpage').bind('click',function(e){
_i=$(this).attr('pageno')-1;
$tslider_animate(ele,_i,_w);
$tslider_active(ele,_i+1);
});
}
$tslider_active=function(ele,i){
ele.prev().prev('.tpage_cont').find('.tpage').removeClass('tpage_active');
ele.prev().prev('.tpage_cont').find('.tpage[pageno="'+i+'"]').addClass('tpage_active');
}
$tslider_animate=function(ele,i,w){
var wi=w*i;
ele.children('.tslideitem').animate({'left':-wi},1000);
}
$(document).ready(function(){
$tsilder($('.tslidescroll'));
});
</script>
<title>สอนทำ Slide ด้วย jQuery</title>
<style>
body{font-family:"Courier New", Courier, monospace;font-size:12px;margin:0;background:url(../images/realsteel.jpg) no-repeat;}
.tslideitem{width:1000em;height:200px;float:left;position:relative;overflow:hidden;}
ul.tslideshow{float:left;position:relative;overflow:hidden;padding:0;margin:0;}
ul.tslideshow li{list-style: none outside none;float:left;margin:5px;}
.tpage_cont{text-align:center;margin:3px;}
.tpage{cursor:pointer;padding:1px 7px 1px 7px; border:#999 solid 1px;margin:1px;background:#F60;}
.tpage_active{background:#FF3;}
.nav-left{float:left;margin:80px 2px 2px 3px;cursor:pointer;border:1px solid #333;padding:2px;}
.nav-right{float:left;margin:80px 2px 2px 3px;cursor:pointer;border:1px solid #333;padding:2px;}
</style>
</head>
<body>
<div style="margin:10px auto;width:900px;">
<div style="width:810px;float:left;background:#F90;display:block;overflow:hidden;margin-top:300px;">
<div class="tpage_cont">
<?php for($page=1;$page<=$pageTotal;$page++){//วนลูปแสดงเลขหน้าทั้งหมด?>
<span class="tpage" pageno="<?=$page?>"><?=$page?></span>
<? }?>
</div>
<div class="nav-left">&laquo;</div>
<div class="tslidescroll" style="float:left;width:770px;position:relative;overflow:hidden;">
<div class="tslideitem">
<ul class="tslideshow">
<?php
while($showPd=mysql_fetch_array($rsShowPd)){
?>
<li>
<div style="float:left;">
<img src="../img_pd/<?=$showPd['pd_img']?>" width="144" height="170" />
<div style="position:absolute;background:#000;color:#FFF;opacity:0.6;padding:2px;width:140px; margin-left:0.5px;bottom:3px;">
<? echo $showPd['pd_name'].'<br />ราคา : '.$showPd['pd_price']?>
</div>
</div>
</li>
<?php }?>
</ul>
</div>
</div>
<div class="nav-right">&raquo;</div>
</div>
<br style="clear:both;" />
</body>
</html>
<?php
mysql_free_result($rsShowPd);
mysql_close($conn);
?>
วิธีเรียกใช้งานคำสั่ง
$(document).ready(function(){
$tsilder($('.tslidescroll'));
});

ความสามารถของโปรแกรม
1.สามารถ คลิกที่ เลขหน้า หรือ สัญลักษณ์ลูกศรซ้าย-ขวา (<< ,>>) เพื่อเลือกดูข้อมูลที่ต้องการได้ การทำงานจะเป็นแบบเลื่อน(Slide)ไปทางซ้ายหรือขวา
2.ในหนึ่่งหน้าเว็บเพจ สามารถแสดง Slide Show ได้ไม่จำกัด โดยใช้คำสั่ง
$(document).ready(function(){ 
$tsilder($('.tslidescroll1'));//.tslidescroll1 คือชื่อ Class ของ DIV Element
$tsilder($('.tslidescroll2'));
$tsilder($('.tslidescroll3'));
.
.
.
});

คุณสามารถนำCodeนี้ไปดัดแปลงกับเว็บไซต์ของคุณได้ครับ แต่ต้องมีความรู้เรื่อง HTML,CSS หน่อยนะ เพราะเราต้องกำหนด Layout ทั้งขนาดความกว้าง ความสูง ฯลฯ ด้วย CSS ทั้งนั้นครับ หากสงสัยอะไรสามารถสอบถามผมได้ จากช่องCommentด้านล่างเลยครับ
DEMO->http://pluto.host22.com/slider-jquery/slide.php (สามารถ View Code ดูได้ครับ).

3 ความคิดเห็น :

  1. เวลาเรียกใช้งาน มันต้องเรียกใช้ยังไง วางโค้ดเรียกใช้งานตรงไหรครับ

    ตอบลบ
    คำตอบ
    1. สร้างไฟล์ .php ขึ้นมาตั้งชื่ออะไรก็ได้ เช่น showslide.php
      ก๊อปปี้โค๊ดไปวาง แล้วแก้ไขคำสั่งเชื่อมต่อกับฐานข้อมูล ที่บรรทัดที่ 2-3
      และแก้พาธเรียกไฟล์ jquery ที่บรรทัด 12

      ลบ
  2. วิธีเรียกใช้งาน
    $(document).ready(function(){
    $tsilder($('.tslidescroll'));
    });
    ต้องเอาโค้ดนี้ไปวางไว้ที่ไหนคับผมไม่เข้าใจคับ

    ตอบลบ