Slideviewer ฟ้าสั่งข้ามาเกิด

ผมจะขอนำเสนอ slide show ที่สร้างขึ้นมาด้วย jquery อีกสักตัว (ก็บอกแล้วว่ามันมีเยอะ) เอาไว้เป็นตัวเลือกเยอะๆครับ มีเยอะดีกว่าหายาก slide ตัวนี้มีดีที่ใช้งานง่ายครับ ไม่ต้องปรับ ไม่ต้องแต่งอะไรมาก โครงสร้างของ html ก็ง่ายดี เรื่องความกว้างความสูงของภาพ ตัวโค้ด จะ detect อัตโนมัติ เพราะฉะนั้น ท่านจะต้องใช้ภาพที่มีขนาดเท่ากัน มาทำ Live Demo ถ้าดู Live Demo แล้วคิดว่าชอบ เดินตามหลังมาครับ ไปดูกันวิธีทำกัน 1. ก่อนอื่น ดาวน์โหลด ไฟล์ที่จำเป็นก่อน แล้วแตกซิปออก 2. เริ่มเขียนโค้ด include jquery กับ ปลั๊กอินที่ใช้สร้าง slide ของเราเข้ามา <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/jquery.easing.1.2.js" type="text/javascript"></script> <script src="js/jquery.slideviewer.1.1.js" type="text/javascript"></script> 3. […]

ภาพไม่เกี่ยวข้องกับบทความ ไว้ชมบันเทิงใจเท่านั้น

ผมจะขอนำเสนอ slide show ที่สร้างขึ้นมาด้วย jquery อีกสักตัว (ก็บอกแล้วว่ามันมีเยอะ) เอาไว้เป็นตัวเลือกเยอะๆครับ มีเยอะดีกว่าหายาก slide ตัวนี้มีดีที่ใช้งานง่ายครับ ไม่ต้องปรับ ไม่ต้องแต่งอะไรมาก โครงสร้างของ html ก็ง่ายดี เรื่องความกว้างความสูงของภาพ ตัวโค้ด จะ detect อัตโนมัติ เพราะฉะนั้น ท่านจะต้องใช้ภาพที่มีขนาดเท่ากัน มาทำ

Live Demo

ถ้าดู Live Demo แล้วคิดว่าชอบ เดินตามหลังมาครับ ไปดูกันวิธีทำกัน

1. ก่อนอื่น ดาวน์โหลด ไฟล์ที่จำเป็นก่อน แล้วแตกซิปออก

2. เริ่มเขียนโค้ด include jquery กับ ปลั๊กอินที่ใช้สร้าง slide ของเราเข้ามา

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.2.js" type="text/javascript"></script>
<script src="js/jquery.slideviewer.1.1.js" type="text/javascript"></script>

3. include css

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

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

<div id="slide" class="svw">
  <ul>
 
    <li><img src="http://lh3.ggpht.com/_MJkDRxwRrPU/So_xjxVw3KI/AAAAAAAACgk/1yfN4MGBcs4/s800/WALLPAPER_0514.jpg" /></li>
    <li><img src="http://lh6.ggpht.com/_MJkDRxwRrPU/So_xkao54wI/AAAAAAAACgo/2wyH63Yw3X0/s800/WALLPAPER_0506.jpg" /></li>
    <li><img src="http://lh3.ggpht.com/_MJkDRxwRrPU/So_x2ZnymlI/AAAAAAAACh0/VJrVGghd9HY/s800/WALLPAPER_1222.jpg" /></li>
    <li><img src="http://lh6.ggpht.com/_MJkDRxwRrPU/So_x3pfM9GI/AAAAAAAACh4/9E3XvAy5h8Q/s400/WALLPAPER_1221.jpg" /></li>
 
  </ul>
</div>

div จะต้องมี class svw ด้วย และท่านจะเห็นว่าไม่ต้องทำอะไรมากเลย นอกจากเอาภาพที่ต้องการทำ slide มาใส่ไว้ในแท็ก li แค่นั้นเอง

5. เขียนโค้ด ทำให้รายการภาพของเรา เป็น slide

<script type="text/javascript"> 
 
	$(document).ready(function(){
		$("#slide").slideView() 
	});
 
</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 src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.2.js" type="text/javascript"></script>
<script src="js/jquery.slideviewer.1.1.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/slideviewer.css" />
<script type="text/javascript"> 
 
	$(document).ready(function(){
		$("#slide").slideView() 
	});
 
</script>
<title>Slide Viewer</title>
</head>
<body>
<div id="slide" class="svw">
  <ul>
 
    <li><img src="http://lh3.ggpht.com/_MJkDRxwRrPU/So_xjxVw3KI/AAAAAAAACgk/1yfN4MGBcs4/s800/WALLPAPER_0514.jpg" /></li>
    <li><img src="http://lh6.ggpht.com/_MJkDRxwRrPU/So_xkao54wI/AAAAAAAACgo/2wyH63Yw3X0/s800/WALLPAPER_0506.jpg" /></li>
    <li><img src="http://lh3.ggpht.com/_MJkDRxwRrPU/So_x2ZnymlI/AAAAAAAACh0/VJrVGghd9HY/s800/WALLPAPER_1222.jpg" /></li>
    <li><img src="http://lh6.ggpht.com/_MJkDRxwRrPU/So_x3pfM9GI/AAAAAAAACh4/9E3XvAy5h8Q/s400/WALLPAPER_1221.jpg" /></li>
 
  </ul>
</div>
</body>
</html>

เพียงง่ายๆ เท่านี้ท่านก็จะได้ ตัวที่ไว้ใช้แสดงภาพแบบมืออาชีพ

ทีนี้ถ้าท่าน เห็นว่าสีกรอบ ไม่ถูกใจ หรือสีของตัวเลือกภาพไม่สบอารมณ์ ท่านสามารถปรับแต่งมันได้ในไฟล์ css ให้ท่านเปิดไฟล์ /css/slideviewer.css

ปรับกรอบภาพ

.stripViewer {  
border: 10px solid #cccccc;/* ปรับแต่ง ขนาด ลักษณะการแสดง และสีกรอบภาพ*/
}

ปรับปุ่มคลิกเลือกแสดงภาพ

/* ลักษณะของปุ่มเลือกภาพ */ 
.stripTransmitter a{ 
background: #cccccc; /* สีพื้นหลัง */
color: #fff; /* สีตัวหนังสือ */
}
 
/* ลักษณะที่จะแสดงเมื่อเอาเมาส์ไปชี้ และปุ่มของภาพที่แสดงอยู่ ณ ปัจจุบัน*/ 
.stripTransmitter a:hover, a.current{ 
background: #cccccc; /* สีพื้นหลัง */
color: #ff0000;  /* สีตัวหนังสือ */
}

ข้อมูลเพิ่มเติม : http://www.gcmingati.net


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

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

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

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

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

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

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

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

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



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

https://leanpub.com/gitforbeginner