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

ผมจะขอนำเสนอ 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

color jquery slide Live Demo slide Slide Viewer
Avatar

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

Programmer, Blogger

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