Moving Boxes

  • วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย
  • Comments

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


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

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

เก็บการเปลี่ยนแปลงของโค้ดทุกบรรทัด

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

สามารถทดสอบเขียนโค้ด โดยไม่ต้องกลัวโค้ดจะพังด้วยกระบวนการการแตก branch

รู้การเปลี่ยนแปลงของโค้ดทุกๆบรรทัด ทำให้ลดปัญหา "เราทำอะไรไปบ้างวะ" อีกทั้งสามารถยกเลิกการเปลี่ยนแปลงโค้ดได้อย่างง่ายดายเพียงแค่คลิกปุ่ม Discard ทุกอย่างก็กลับมาเหมือนเดิม

อีกหลายอย่าง เขียนอธิบายไว้ในหนังสือเล่มนี้แล้ว

Git สำหรับโปรแกรมเมอร์

Git สำหรับโปรแกรมเมอร์



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

https://leanpub.com/gitforbeginner

แสดงความคิดเห็น

comments