เดี๋ยวนี้ตัวปลั๊กอินที่ใช้สำหรับแสดงภาพของ jQuery มีให้เลือกเยอะแยะมากมาย เรียกได้ว่าหามาใช้กันไม่หมดไม่สิ้น วันนี้ผมก็มีมานำเสนออีกตัวหนึ่ง เห็นว่าน่าสนใจครับ ดูภาพก่อนเลยว่า หน้าตามันเป็นยังไง

Live Demo

ถ้าท่านดูแล้วชอบ อยากนำไปใช้ในเว็บบ้าง ตามมาเลยครับ ผมจะนำเสนอวิธีการใช้งาน

ก่อนอื่นให้ ดาวน์โหลด สิ่งที่จำเป็นต้องใช้ก่อน หลังจากดาวน์โหลดแล้วก็แตกซิปออกนะครับ แล้วมาเริ่มเขียนโค้ดกัน (ในโฟลเดอร์ที่ท่านดาวน์โหลดไป มีไฟล์ตัวอย่าง index.html อยู่ ก้อปปี้ วาง ใช้ได้เลย)

1. include ไฟล์ css เข้ามาก่อน เป็นอันดับแรก ไว้ตกแต่งไสลด์โชว์เรา ไม่ให้เละเทะ

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">

2. include jquery กับตัวใช้สร้าง slide เข้ามา

<script src="js/jquery-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/slider.js" type="text/javascript" charset="utf-8"></script>

3. โครงสร้าง html

<div id="wrapper">
  <div id="slider"> <img class="scrollButtons left" src="images/leftarrow.png">
    <div style="overflow: hidden;" class="scroll">
      <div class="scrollContainer">
 
        <!-- บ้อกภาพที่ 1 - เริ่มต้น -->
        <div class="panel" id="panel_1">
          <div class="inside"> <img src="http://lh6.ggpht.com/_MJkDRxwRrPU/So_zhfMpCfI/AAAAAAAACnY/EAuAa1x0tFc/s400/apwmrtcasvf.jpg"  />
            <h2>น่ารัก</h2>
            <p>ดูภาพใหญ่ <a href="http://lh6.ggpht.com/_MJkDRxwRrPU/So_zhfMpCfI/AAAAAAAACnY/EAuAa1x0tFc/s800/apwmrtcasvf.jpg">คลิกที่นี่</a></p>
          </div>
        </div>
        <!-- บ้อกภาพที่ 1 - จบ -->
 
        <!-- บ้อกภาพที่ 2 - เริ่มต้น -->
        <div class="panel" id="panel_2">
          <div class="inside"> <img src="http://lh3.ggpht.com/_MJkDRxwRrPU/So_0WpcJ04I/AAAAAAAACnc/__uX8SIOtbU/s400/360_4601.jpg"   />
            <h2>สุสานคนเป็น</h2>
            <p>ดูภาพใหญ่ <a href="http://lh3.ggpht.com/_MJkDRxwRrPU/So_0WpcJ04I/AAAAAAAACnc/__uX8SIOtbU/s800/360_4601.jpg">คลิกที่นี่</a></p>
          </div>
        </div>
        <!-- บ้อกภาพที่ 2 - จบ -->
 
        <!-- บ้อกภาพที่ 3 - เริ่มต้น -->
        <div class="panel" id="panel_3">
          <div class="inside"> <img src="http://lh6.ggpht.com/_MJkDRxwRrPU/So_0camdlnI/AAAAAAAACns/smBDACpUAP4/s400/%21cid_049701c8b9f6%24833178d0%246401a8c0%40m2.jpg" />
            <h2>ต้นปรัชญา</h2>
            <p>ดูภาพใหญ่ <a href="http://lh6.ggpht.com/_MJkDRxwRrPU/So_0camdlnI/AAAAAAAACns/smBDACpUAP4/s800/%21cid_049701c8b9f6%24833178d0%246401a8c0%40m2.jpg">คลิกที่นี่</a></p>
          </div>
        </div>
        <!-- บ้อกภาพที่ 3 - จบ -->
 
      </div>
      <div id="left-shadow"></div>
      <div id="right-shadow"></div>
    </div>
    <img class="scrollButtons right" src="images/rightarrow.png"> </div>
</div>

โครงสร้างนี้ไม่ต้องไปดูไรมากครับ ก้อปปี้โลด ก้อปปี้ไปให้ครบนะครับไม่งั้นเละ ท่านจะเห็นว่า ผมได้คอมเม้นท์ บล้อกที่สำคัญ ไว้เป็นบล้อกๆ ท่านจะได้เพิ่มภาพ ลบภาพได้สะดวก

<!-- บ้อกภาพที่ 1 - เริ่มต้น -->
<div class="panel" id="panel_1">
  <div class="inside">
   <img src="http://lh6.ggpht.com/_MJkDRxwRrPU/So_zhfMpCfI/AAAAAAAACnY/EAuAa1x0tFc/s400/apwmrtcasvf.jpg"  />
    <h2>น่ารัก</h2>
    <p>ดูภาพใหญ่ <a href="http://lh6.ggpht.com/_MJkDRxwRrPU/So_zhfMpCfI/AAAAAAAACnY/EAuAa1x0tFc/s800/apwmrtcasvf.jpg">คลิกที่นี่</a></p>
  </div>
</div>
<!-- บ้อกภาพที่ 1 - จบ -->

ในกรณีที่่ท่านต้องการเพิ่มจำนวน slide ท่านก็ก้อปปี้บล็อกนี้ทั้งบล้อก วางไว้ต่อท้ายตัวเดิมก็ได้ แล้วก็ห้ามลืมเปลี่ยน id=”panel_1″ เป็นอย่างอื่นด้วย ที่จะไม่ซ้ำกัน

<!-- บ้อกภาพที่ 1 - เริ่มต้น -->
<div class="panel" id="panel_1">
  <div class="inside">
   <img src="http://lh6.ggpht.com/_MJkDRxwRrPU/So_zhfMpCfI/AAAAAAAACnY/EAuAa1x0tFc/s400/apwmrtcasvf.jpg"  />
    <h2>น่ารัก</h2>
    <p>ดูภาพใหญ่ <a href="http://lh6.ggpht.com/_MJkDRxwRrPU/So_zhfMpCfI/AAAAAAAACnY/EAuAa1x0tFc/s800/apwmrtcasvf.jpg">คลิกที่นี่</a></p>
  </div>
</div>
<!-- บ้อกภาพที่ 1 - จบ -->
 
<!-- บ้อกภาพที่ 5 - เริ่มต้น -->
<div class="panel" id="panel_5">
  <div class="inside">
   <img src="http://lh6.ggpht.com/_MJkDRxwRrPU/So_zhfMpCfI/AAAAAAAACnY/EAuAa1x0tFc/s400/apwmrtcasvf.jpg"  />
    <h2>น่ารัก</h2>
    <p>ดูภาพใหญ่ <a href="http://lh6.ggpht.com/_MJkDRxwRrPU/So_zhfMpCfI/AAAAAAAACnY/EAuAa1x0tFc/s800/apwmrtcasvf.jpg">คลิกที่นี่</a></p>
  </div>
</div>
<!-- บ้อกภาพที่ 5 - จบ -->

ตัวอย่างการก้อปปี้ ให้ก้อปไปทั้ง comment ด้วย จะได้ดูโค้ดสะดวก

โค้ดทั้งหมด

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>Moving Boxes</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
<script src="js/jquery-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/slider.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="wrapper">
  <div id="slider"> <img class="scrollButtons left" src="images/leftarrow.png">
    <div style="overflow: hidden;" class="scroll">
      <div class="scrollContainer">
 
        <!-- บ้อกภาพที่ 1 - เริ่มต้น -->
        <div class="panel" id="panel_1">
          <div class="inside"> <img src="http://lh6.ggpht.com/_MJkDRxwRrPU/So_zhfMpCfI/AAAAAAAACnY/EAuAa1x0tFc/s400/apwmrtcasvf.jpg"  />
            <h2>น่ารัก</h2>
            <p>ดูภาพใหญ่ <a href="http://lh6.ggpht.com/_MJkDRxwRrPU/So_zhfMpCfI/AAAAAAAACnY/EAuAa1x0tFc/s800/apwmrtcasvf.jpg">คลิกที่นี่</a></p>
          </div>
        </div>
        <!-- บ้อกภาพที่ 1 - จบ -->
 
        <!-- บ้อกภาพที่ 2 - เริ่มต้น -->
        <div class="panel" id="panel_2">
          <div class="inside"> <img src="http://lh3.ggpht.com/_MJkDRxwRrPU/So_0WpcJ04I/AAAAAAAACnc/__uX8SIOtbU/s400/360_4601.jpg"   />
            <h2>สุสานคนเป็น</h2>
            <p>ดูภาพใหญ่ <a href="http://lh3.ggpht.com/_MJkDRxwRrPU/So_0WpcJ04I/AAAAAAAACnc/__uX8SIOtbU/s800/360_4601.jpg">คลิกที่นี่</a></p>
          </div>
        </div>
        <!-- บ้อกภาพที่ 2 - จบ -->
 
        <!-- บ้อกภาพที่ 3 - เริ่มต้น -->
        <div class="panel" id="panel_3">
          <div class="inside"> <img src="http://lh6.ggpht.com/_MJkDRxwRrPU/So_0camdlnI/AAAAAAAACns/smBDACpUAP4/s400/%21cid_049701c8b9f6%24833178d0%246401a8c0%40m2.jpg" />
            <h2>ต้นปรัชญา</h2>
            <p>ดูภาพใหญ่ <a href="http://lh6.ggpht.com/_MJkDRxwRrPU/So_0camdlnI/AAAAAAAACns/smBDACpUAP4/s800/%21cid_049701c8b9f6%24833178d0%246401a8c0%40m2.jpg">คลิกที่นี่</a></p>
          </div>
        </div>
        <!-- บ้อกภาพที่ 3 - จบ -->
 
      </div>
      <div id="left-shadow"></div>
      <div id="right-shadow"></div>
    </div>
    <img class="scrollButtons right" src="images/rightarrow.png"> </div>
</div>
</body>
</html>

แหล่งข้อมูลเพิ่มเติม :
http://css-tricks.com/moving-boxes