S3slide ภาพเลื่อนสุดขอบโลก

วันนี้ผมจะมานำเสนอ slide show หรือจะเรียกว่าภาพเลื่อนๆ ก็แล้วแต่ สคริปต์ตัวนี้เป็น jquery plugin ลองดู Live Demo ถ้าชอบตามมาดูวิธีทำกันเลยครับ 1. ก่อนอื่นก็ต้อง ดาวน์โหลด สิ่งที่จำเป็นกันก่อน หลังจากดาวน์โหลดมาแล้วให้แตกซิปออก จริงๆในโฟลเดอร์ผมได้ใส่ตัวอย่างการใช้งานแล้วไว้ล่ะ ท่านสามารถศึกษาจากตัวนั้นก็ได้ 2. เริ่มเขียนโค้ด include jquery กับ s3slide เข้ามา <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/s3Slider.js"></script> 3. include css เข้ามา <link rel="stylesheet" type="text/css" href="css/style.css" /> 4. โครงสร้าง html <div id="s3slider"> <ul id="s3sliderContent">   <!– Slide 1 begin –> <li […]

ภาพไม่เกี่ยวข้องกับบทความ

วันนี้ผมจะมานำเสนอ slide show หรือจะเรียกว่าภาพเลื่อนๆ ก็แล้วแต่ สคริปต์ตัวนี้เป็น jquery plugin ลองดู

Live Demo

ถ้าชอบตามมาดูวิธีทำกันเลยครับ

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

2. เริ่มเขียนโค้ด include jquery กับ s3slide เข้ามา

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/s3Slider.js"></script>

3. include css เข้ามา

<link rel="stylesheet" type="text/css" href="css/style.css" />

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

<div id="s3slider">
  <ul id="s3sliderContent">
 
    <!-- Slide 1 begin -->
    <li class="s3sliderImage"> <img src="http://lh3.ggpht.com/_MJkDRxwRrPU/So_xjxVw3KI/AAAAAAAACgk/1yfN4MGBcs4/s800/WALLPAPER_0514.jpg" /> <span class="top">ใส่ข้อความเข้าไปตรงนี้</span> </li>
    <!-- Slide 1 end -->
 
    <!-- Slide 2 begin -->
    <li class="s3sliderImage"> <img src="http://lh6.ggpht.com/_MJkDRxwRrPU/So_xkao54wI/AAAAAAAACgo/2wyH63Yw3X0/s800/WALLPAPER_0506.jpg" /> <span class="right">ใส่ข้อความเข้าไปตรงนี้</span> </li>
    <!-- Slide 2 end -->
 
    <div class="clear s3sliderImage"></div>
  </ul>
</div>

ผมคอมเม้นท์ ส่วนที่เป็นตัว slide ไว้แล้ว ถ้าต้องการเพิ่ม slide เยอะๆก็ก้อปปี้แล้ววางเอาครับ แล้วก็เปลี่ยนรูปภาพ กับข้อความเอา

<span class="right">ใส่ข้อความเข้าไปตรงนี้</span>

class จะเป็นตัวกำหนดตำแหน่งแสดง ข้อความ ซึ่งมีค่าเป็นไปได้คือ top , bottom , left , right

5. เขียนโค้ดสร้าง slide ตัวเลขตรง timeOut ถ้าต้องการให้ภาพเลื่อนเร็วขึ้นก็ ใช้ค่าตัวเลขน้อยๆ ถ้าต้องการช้างๆ ก็ตัวเลขมากๆ

<script type="text/javascript">
$(document).ready(function() {
   $('#s3slider').s3Slider({ timeOut: 4000 });
}); 
</script>

โค้ดทั้งหมด

<!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-1.3.2.min.js"></script>
<script type="text/javascript" src="js/s3Slider.js"></script>
 
<link rel="stylesheet" type="text/css" href="css/style.css" />
 
<script type="text/javascript">
$(document).ready(function() {
   $('#s3slider').s3Slider({ timeOut: 4000 });
}); 
</script>
<title>S3slide</title>
</head>
<body>
<div id="s3slider">
  <ul id="s3sliderContent">
 
    <!-- Slide 1 begin -->
    <li class="s3sliderImage"> <img src="http://lh3.ggpht.com/_MJkDRxwRrPU/So_xjxVw3KI/AAAAAAAACgk/1yfN4MGBcs4/s800/WALLPAPER_0514.jpg" /> <span class="top">ใส่ข้อความเข้าไปตรงนี้</span> </li>
    <!-- Slide 1 end -->
 
    <!-- Slide 2 begin -->
    <li class="s3sliderImage"> <img src="http://lh6.ggpht.com/_MJkDRxwRrPU/So_xkao54wI/AAAAAAAACgo/2wyH63Yw3X0/s800/WALLPAPER_0506.jpg" /> <span class="right">ใส่ข้อความเข้าไปตรงนี้</span> </li>
    <!-- Slide 2 end -->
 
    <div class="clear s3sliderImage"></div>
  </ul>
</div>
</body>
</html>

การปรับแต่ง

ในกรณีที่ท่านใช้ภาพไม่เท่ากับในตัวอย่างของ ท่านจะต้องปรับแต่ง css เล็กน้อย ให้เปิดไฟล์ /css/style.css ขึ้นมา

ตำแหน่ง ที่ 1 ที่จะ้ต้องปรับแต่ง

#s3slider {
   width: 640px; /* กำหนดให้ความกว้างเท่ากับความกว้างของภาพที่จะใช้ */
   height: 480px; /* กำหนดให้ความสูงเท่ากับความสูงของภาพที่จะใช้  */
}

ตำแหน่ง ที่ 2 ที่จะ้ต้องปรับแต่ง

#s3sliderContent {
   width: 640px; /* กำหนด ตัวเลขให้เท่ากับความกว้างของภาพที่จะใช้  */
}

ตำแหน่ง ที่ 3 ที่จะ้ต้องปรับแต่ง

.s3sliderImage span {
   width: 640px; /* กำหนด ตัวเลขให้เท่ากับความกว้างของภาพที่จะใช้  */
}

ตำแหน่ง ที่ 4 ที่จะ้ต้องปรับแต่ง ส่วนนี้จะเป็นส่วนสำหรับกำหนด แถบแสดงตัวหนังสือใน slide

.s3sliderImage span.top {
	width: 640px !important;/* กำหนด ตัวเลขให้เท่ากับความกว้างของภาพที่จะใช้  */
	height: 110px;/* กำหนดได้ตามพอใจ  */
}
.s3sliderImage span.bottom {
	width: 640px !important;/* กำหนด ตัวเลขให้เท่ากับความกว้างของภาพที่จะใช้  */
	height: 110px;/* กำหนดได้ตามพอใจ  */
}
.s3sliderImage span.left {
	width: 110px !important;/* กำหนดได้ตามพอใจ  */
	height: 640px;/* กำหนด ตัวเลขให้เท่ากับความกว้างของภาพที่จะใช้  */
}
.s3sliderImage span.right {
	width: 110px !important;/* กำหนดได้ตามพอใจ  */
	height: 640px;/* กำหนด ตัวเลขให้เท่ากับความกว้างของภาพที่จะใช้  */
}

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

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

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

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

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

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

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

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

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



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

https://leanpub.com/gitforbeginner

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

comments