สวัสดีครับ ไม่ได้อัพบทความซะนานเลยผม ไม่รู้ว่าหายกันไปหมดหรือยัง วันนี้ผมมีลูกเล่นอีก 1 อย่างมานำเสนอ ให้เพื่อนๆ ได้เอาไปใช้งานกัน นั้นก็คือ Slideshow ที่สร้างด้วย jQuery นั้นแหละครับ แต่ ! มันจะทำงานได้ก็ต่อเมื่อ เบราเซอร์ นั้นๆ รองรับ Javascript ด้วยนะครับ เอาหละครับ มาเรื่มกันเลยดีกว่า…
ก่อนอื่นเราต้องมาเตรียมเครื่องไม้เครื่องมือกันก่อนนะครับ เนื่องจากว่าต้องใช้สคริป 2 ตัวที่ชื่อ
jquery.js และ
s3Slider. js มาใช้งานร่วมกันด้วยครับ ดาวน์โหลดได้ที่นี้ครับ
>>คลิก<< หรือหากต้องการศึกษาหาข้อมูลเพิ่มเติมก็หาอ่านได้จากที่นี้เลยครับ
>>คลิก<< เสร็จแล้วก็มาเริ่มลงมือในบล็อกของเรากันครับ
1.เริ่มแรก หลังจาก
Login แล้ว ให้ไปที่
รูปแบบ ->
แก้ไข HTML และติ๊ก
Checkbox ที่ ขยายแม่แบบเครื่องมือ (แล้วอย่าลืม Backup ธีมเก่าไว้ก่อนนะครับ กันพลาด คลิกที่ ดาวน์โหลดแม่แบบฉบับเต็ม)
2.นำ Code ด้านล่างไปวางไว้ในตำแหน่งก่อนที่จะปิด Tag </head> นะครับ แล้วอย่าลืมแก้ตรงที่เป็นสีแดง ให้ชี้ไปยังต่ำแหน่งที่คุณเอาไฟล์ไปไว้ในโฮสนะครับ (หากใครไม่มีโฮสอ่านต่อด้านล่างนะครับ)
<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 นะครับ เพราะผมก็ไม่รู้ว่าจะเขียนเรื่องอะไร ><” เรื่องนี้ก็เพิ่งมีคนขอมาเช่นกัน ถึงได้ฤกษ์มาเขียน
