Moving Boxes

เดี๋ยวนี้ตัวปลั๊กอินที่ใช้สำหรับแสดงภาพของ 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. […]

เดี๋ยวนี้ตัวปลั๊กอินที่ใช้สำหรับแสดงภาพของ 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


หนังสือ Selenium IDE for Starter มีขายแล้ววันนี้ เขียนโดยผมเอง วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

ทำไมต้องใช้ Selenium IDE

ความสุข
ลองคิดดูจากเมื่อก่อนเราเขียนโปรแกรมเสร็จแล้ว เราต้องมาทดสอบโปรแกรมว่าทำงานถูกต้องหรือเปล่าซ้ำๆ น่าเบื่อ พอเรานำ Selenium IDE มาใช้ เราเขียนโค้ดเสร็จ กด Selenium IDE เพื่อให้มันช่วยป้อนข้อมูล ช่วยคลิก ช่วยตรวจข้อมูลว่าถูกต้องหรือไม่ เราแค่นั่งจิบกาแฟและมอง เมื่อทดสอบเสร็จมันจะรายงานผลด้วยว่าไม่ผ่านตรงไหนบ้าง

ความผ่อนคลาย
เมื่อการทำงานซ้ำๆเดิมๆ น่าเบื่อหน่ายเราปล่อยให้เป็นหน้าที่ของผู้ช่วยอัตโนมัติ (Selenium IDE) เสียแล้ว เราก็นั่งทำงานอย่างไม่น่าเบื่อ ชิวๆ มีพลัง

เวลา
บางคนอาจจะแย้งว่าไม่จริงหรอกพอหัวหน้าเห็นเราว่างก็เพิ่มงาน มันก็จริง แต่อย่าลืมว่างานที่ทำลงไปและเครื่องมือที่ใช้เราสามารถเอาไปลงเรซูเมเราได้ ยิ่งมีผลงานมากมากในเวลาสั้นๆ ยิ่งสะท้อนความสามารถและตั้งใจทำงาน หรือไม่อย่างนั้น ก็มีเวลาศึกษาความรู้เพิ่ม อย่าลืมนะครับว่า เครื่องมืออัตโนมัติ มันไม่ต้องมองแป้นคีย์บอร์ด ตอนที่มันพิมพ์
งานออกมาดีกว่า
เพราะเราไม่ต้องคอยตรวจความผิดของโปรแกรมเอง ทำให้มีเวลา มีพลัง ที่จะป้องกันบักในจุดที่เป็นเล็กๆน้อยๆ หรือไม่ก็มีเวลาเล่นโปรแกรมของตัวเอง เพื่อหาข้อผิดพลาดของโค้ดได้มากขึ้น
ฯลฯ

ในฐานะเจ้าของบริษัทหรือหัวหน้าแผนกก็ควรอย่างยิ่งที่จะให้ลูกน้องรู้เรื่อง Selenium IDE ใช้ Selenium IDE เป็น เพราะเมื่อลูกน้องเขียนโค้ดเสร็จเร็ว โค้ดมีประสิทธิภาพ บริษัทก็กำไร หัวหน้าก็มีผลงาน ลองคิดดู บริษัทจ้างโปรแกรมเมอร์มา ถ้าคิดค่าตัวเป็นวัน มันก็หลายบาท แล้วโปรแกรมเมอร์หมดเวลาไปกับการนั่งพิมพ์ป้อนข้อมูลลงฟอร์ม เพื่อทดสอบความถูกต้องของโปรแกรมเนี่ยนะ มันไม่เม้กเซ้นต์

Selenium IDE for Starter

Selenium IDE for Starter



ต้องการซื้อคลิกที่นี่

https://leanpub.com/seleniumideforstarter