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


หนังสือ 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

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

comments