วิธีการทำ Slideshow แบบงามๆ ด้วย jQuery ให้กับ Blogger

สวัสดีครับ ไม่ได้อัพบทความซะนานเลยผม ไม่รู้ว่าหายกันไปหมดหรือยัง วันนี้ผมมีลูกเล่นอีก 1 อย่างมานำเสนอ ให้เพื่อนๆ ได้เอาไปใช้งานกัน นั้นก็คือ Slideshow ที่สร้างด้วย jQuery นั้นแหละครับ แต่ ! มันจะทำงานได้ก็ต่อเมื่อ เบราเซอร์ นั้นๆ รองรับ Javascript ด้วยนะครับ เอาหละครับ มาเรื่มกันเลยดีกว่า…

ก่อนอื่นเราต้องมาเตรียมเครื่องไม้เครื่องมือกันก่อนนะครับ เนื่องจากว่าต้องใช้สคริป 2 ตัวที่ชื่อ jquery.js และ s3Slider. js มาใช้งานร่วมกันด้วยครับ ดาวน์โหลดได้ที่นี้ครับ >>คลิก<< หรือหากต้องการศึกษาหาข้อมูลเพิ่มเติมก็หาอ่านได้จากที่นี้เลยครับ >>คลิก<< เสร็จแล้วก็มาเริ่มลงมือในบล็อกของเรากันครับ

1.เริ่มแรก หลังจาก Login แล้ว ให้ไปที่ รูปแบบ -> แก้ไข HTML และติ๊ก Checkbox ที่ ขยายแม่แบบเครื่องมือ (แล้วอย่าลืม Backup ธีมเก่าไว้ก่อนนะครับ กันพลาด คลิกที่ ดาวน์โหลดแม่แบบฉบับเต็ม)

2.นำ Code ด้านล่างไปวางไว้ในตำแหน่งก่อนที่จะปิด Tag &lt;/head&gt; นะครับ แล้วอย่าลืมแก้ตรงที่เป็นสีแดง ให้ชี้ไปยังต่ำแหน่งที่คุณเอาไฟล์ไปไว้ในโฮสนะครับ (หากใครไม่มีโฮสอ่านต่อด้านล่างนะครับ)

<script src=' http://./jquery.js ' type='text/javascript'/>         
<script src=' http://./s3Slider.js ' type='text/javascript'/>         
<script type='text/javascript'>         
//<![CDATA[         
$(document).ready(function() {         
$('#slider1').s3Slider({         
timeOut: 5000         
});         
});         
//]]>         
</script>

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

วิธีทำสำหรับคนที่ไม่มีโฮสนะครับ ให้ทำการเปิดไฟล์ jquery.js และ s3Slider. js ด้วยอะไรก็ได้ครับ ตามถนัดเลย Notepad ก็ได้ แล้วทำการ Copy ข้อมูลทั้งหมดในนั้น *ทั้ง 2อัน มาวางทับตรงที่ผมเน้นสีแดงไว้ทั้งหมด  ผมเน้นแล้วนะครับว่าสีแดงทั้งหมด ตาม Code ด้านล่างเลยนะครับ

<script type='text/javascript'>      
//<![CDATA[       
/* Copy ข้อมูลทั้งหมดมาวางที่นี้นะครับ */       
//]]>       
</script>       
<script type='text/javascript'>       
//<![CDATA[       
$(document).ready(function() {       
$('#slider1').s3Slider({       
timeOut: 5000       
});       
});       
//]]>       
</script>

3.ทำการเพิ่ม CSS เข้าไปในส่วนของ CSS นะครับ แทรกตรงไหนก็ได้ ตรงที่ผมเน้นสีแดงเอาไว้ จะเป็นขนาดของ ความกว้าง และ ความสูงที่จะให้แสดงนะครับ เราก็ทำการแก้ไขซะเอาขนาดตามขนาดที่เราต้องการ

#slider1 {      
width:525px; /* To be same as image width */       
height:237px; /* To be same as image height */       
position: relative;       
overflow: hidden;       
border:1px solid #eee;       
margin:0 auto;       
} 
#slider1Content {      
width:525px; /* To be same as image width or wider */       
position: absolute;       
top: 0;       
list-style:none;       
margin:0;       
padding:0;       
}       
.slider1Image {       
float: left;       
position: relative;       
display: none;       
}       
.slider1Image span {       
position: absolute;       
font: 10px/15px Arial, Helvetica, sans-serif;       
padding: 10px 13px;       
width:550px;       
background-color: #000;       
filter: alpha(opacity=70);       
-moz-opacity: 0.7;       
-khtml-opacity: 0.7;       
opacity: 0.7;       
color: #fff;       
display: none;       
bottom:0;       
}       
.clear {       
clear: both;       
}       
.slider1Image span strong {       
font-size:14px;       
}

ตอนนี้เสร็จขั้นตอนในหน้าแก้ไข HTML แล้วครับ กด Save ได้เลยครับ แล้วไปต่อกันที่ องค์ประกอบของหน้า

4.มาที่ องค์ประกอบของหน้านะครับ แล้วเลือกเพิ่ม Gadget แบบ html/javascript ขึ้นมา 1อัน แล้วเอาวางไว้ด้านบน บทความบล็อก (หรือหากใครอยากไว้ตรงไหนก็ปรับแต่งตามใจชอบได้เลยครับ) แล้วนำ Code ด้านล่างนี้ไปวางนะครับ

<div id="slider1">      
<ul id="slider1Content"> 
<li class="slider1Image">      
<a href=' http://ลิ้งที่เราต้องการลิ้งไป '>       
<img alt="my image" src=" http://ลิ้งของรูปภาพที่ต้องการแสดง"/>       
</a>       
<span>       
<strong> Title ที่จะให้แสดง </strong>       
<br/>       
description ที่จะให้แสดง       
</span>       
</li> 
<li class="slider1Image">      
<a href=' http://ลิ้งที่เราต้องการลิ้งไป '>       
<img alt="some image" src=" http://ลิ้งของรูปภาพที่ต้องการแสดง"/>       
</a>       
<span>       
<strong> Title ที่จะให้แสดง </strong>       
<br/>       
description ที่จะให้แสดง       
</span>       
</li> 
<div class="clear slider1Image"></div>      
</ul>       
</div>

*หมายเหตุ Code ด้านบนเป็นเพียงตัวอย่างการแสดงแบบ 2 ภาพนะครับหากต้องการมากกว่านี้ ก็เพิ่มได้ครับ และหากต้องการ ปรับแต่งการแสดงผลแบบว่า ให้ Title กับ คำอธิบาย แสดงจากด้านบน หรือ ทางด้านข้าง ก็สามารถทำได้นะครับ ท่านสามารถศึกษาได้จากไฟล์ ที่ได้ดาวน์โหลดไป หรือ ศึกษาเพิ่มเติม >>คลิกที่นี้<< ครับ

วันนี้ไปก่อนหละครับ เหมือนเดิมนะครับ ใครอยากให้เขียนเรื่องอะไรก็ pm ทิ้งไว้ที่ TSB นะครับ เพราะผมก็ไม่รู้ว่าจะเขียนเรื่องอะไร ><” เรื่องนี้ก็เพิ่งมีคนขอมาเช่นกัน ถึงได้ฤกษ์มาเขียน