Slideshow ใน Blogger อีกรูปแบบหนึ่งชื่อว่า S3slider ซึ่ง Slideshow ชนิดนี้พัฒนาโดย serie3.info ลักษณะเด่น ๆ ของ SlideShow ก็คือ
1. ติดตั้งง่าย
2. ใช้เวลาในการโหลดบนหน้า blogger รวดเร็ว
3. โค้ดในการติดตั้งมีน้อย ถ้าเทียบกับ SlideShow แบบอื่น ๆ
4. สามารถปรับขนาดได้อย่างง่ายดายยืดหยุ่นในตำแหน่งที่ติดตั้ง
5. สามารถติดตั้งหลาย ๆ จุดในแม่แบบได้พร้อม ๆ กัน
6. สามารถแทรกข้อความทีเป็น Feature ได้ (แสดงผลได้ทั้งภาพและข้อความ)
ตัวอย่างการทำงานของ SlideShow ชนิดนี้ดูได้จาก jQuery S3Slider
สำหรับการติดตั้ง SlideShow ผมจะสร้างทางเลือกในการติดตั้งเอาไว้ 3 ทางเลือกได้แก่
ทางเลือกที่ 1 ติดตั้ง S3slider ขนาดใหญ่อย่างเดียว
ทางเลือกที่ 2 ติดตั้ง S3slider ขนาดเล็กอย่างเดียว
ทางเลือกที่ 3 ติดตั้ง S3slider ขนาดใหญ่หรือเล็กมากกว่า 1 ตำแหน่งในหน้าเดียวกัน
ดังนั้นคุณควรจะระบุความต้องการของตัวเองให้ชัดเจนก่อนแล้วจึงเลือกติดตั้งตามขึ้นตอนใดขั้นตอนหนึ่ง
ขั้นตอนการติดตั้ง jQuery S3Slider
ก่อนอื่นให้คุณ Login เข้าไปที่ blogger.com และจากแผงควบคุมให้เข้าไปที่ การออกแบบ >> แก้ไข HTML
ขั้นที่ 1 ติดตั้ง CSS โค้ดเพื่อกำหนดรูปแบบ
ให้คุณค้นหาโค้ด ]]></b:skin> และเมื่อพบแล้วให้วางโค้ดด้านล่างนี้ลงไปก่อนหน้าโค้ด ]]></b:skin>
#slider {หมายเหตุ
width: 410px;/*ความกว้างของSlideขนาดเล็กนี้สามารถปรับเพิ่มหรือลดได้และควรเท่ากับขนาดของรูป*/
height: 300px; /* ปรับให้เท่ากับขนาดของรูปที่ใช้ */
position: relative; /* important */
overflow: hidden; /* important */
}
#slider1, #slider2 {
width: 720px;/*ความกว้างของSlideขนาดใหญ่นี้สามารถปรับเพิ่มหรือลดได้และควรเท่ากับขนาดของรูป*/
height: 300px; /* ปรับให้เท่ากับขนาดของรูปที่ใช้ */
position: relative; /* important */
overflow: hidden; /* important */
}
#sliderContent, #slider1Content, #slider2Content {
width: 720px;
position: absolute;
top: 0;
margin-left: 0;
}
.sliderImage, .slider1Image, .slider2Image {
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 384px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.slider1Image span, .slider2Image span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 694px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear { clear: both;}
.sliderImage span strong, .slider1Image span strong, .slider2Image span strong { font-size: 14px;}
.top { top: 0; left: 0;}
.bottom { bottom: 0; left: 0;}
.left { top: 0; left: 0; width: 110px !important; height: 280px;}
.right { right: 0; bottom: 0; width: 90px !important; height: 290px;}
โค้ดด้านบนนี้เป็นที่ผมผสมผสาน CSS ของ S3slider ทั้ง 3 รูปแบบเข้าด้วยกัน โดยที่
ID slider เป็นโค้ดที่กำหนด Style ของ S3slider ขนาดเล็ก (กว้าง 400 สูง 300)
ID slider1 เป็นโค้ดที่กำหนด Style ของ S3slider ขนาดเล็ก (กว้าง 720 สูง 300 แบบที่ 1)
ID slider2 เป็นโค้ดที่กำหนด Style ของ S3slider ขนาดเล็ก (กว้าง 720 สูง 300 แบบที่ 2 )
ดังนั้นคุณอาจจะติดตั้งโค้ดทั้งหมดลงไปเพื่อให้สามารถเพิ่มรูปแบบ S3slider ได้ในภายหลัง หรือถ้าคุณต้องการติดตั้งเพียง S3slider รูปแบบใดรูปแบบหนึ่งเท่านั้น คุณก็สามารถสามารถลบโค้ดที่ไม่เกี่ยวข้องทิ้งไปได้
เช่น ถ้าผมต้องการติดตั้งเฉพาะ S3slider ขนาดเล็กก็อาจจะใช้โค้ดเพียง
#slider {
width: 410px;/*ความกว้างของSlideขนาดเล็กนี้สามารถปรับเพิ่มหรือลดได้และควรเท่ากับขนาดของรูป*/
height: 300px; /* ปรับให้เท่ากับขนาดของรูปที่ใช้ */
position: relative; /* important */
overflow: hidden; /* important */
}
#sliderContent{
width: 720px;
position: absolute;
top: 0;
margin-left: 0;
}
.sliderImage{
float: left;
position: relative;
display: none;
}
.sliderImage span {
position: absolute;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 384px;
background-color: #000;
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
color: #fff;
display: none;
}
.clear { clear: both;}
.sliderImage span strong, .slider1Image span strong, .slider2Image span strong { font-size: 14px;}
.top { top: 0; left: 0;}
.bottom { bottom: 0; left: 0;}
.left { top: 0; left: 0; width: 110px !important; height: 280px;}
.right { right: 0; bottom: 0; width: 90px !important; height: 290px;}
ขั้นที่ 2 ติดตั้งจาวาสคริปต์เพื่อให้ S3slider มีการเคลื่อนไหว
ในขั้นนี้ให้คุณค้นหาโค้ด </head> และเมื่อพบแล้วให้วางโค้ดต่อไปนี้ลงไปก่อนหน้าโค้ดดังกล่าว
<!--s3Slider http://www.hackublog.com Start-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://siiam.bravehost.com/s3Slider.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 3000
});
$('#slider1').s3Slider({
timeOut: 4000
});
$('#slider2').s3Slider({
timeOut: 5000
});
});
</script>
<!--/s3Slider-->
ตัวเลข 3000 , 4000 และ 5000 หมายถึงเวลาที่ใช้ในการเปลี่ยน Slide โดยที่ 1000 ก็คือ 1 วินาที ซึ่งคุณสามารถปรับเพิ่มหรือลดตามความต้องการได้ (ตอนปรับให้ดูชื่อของ ID ให้ตรงกับ ID ที่ติดตั้งด้วย)
ส่วนชุดโค้ด
$('#ใส่ชื่อไอดีตัวใหม่').s3Slider({เป็นการระบุว่าจะให้สคริปต์นี้ส่งผลต่อ ID ใด
timeOut: 5000
});
ขั้นที่ 3 HTML สำหรับติดตั้ง S3slider
คุณสามารถติดตั้ง S3slider มากกว่า 1 แบบลงไปในหนึ่งหน้าได้ โค้ดทั้ง 3 ชุดต่อไปนี้เป็นโค้ดของ S3slider ทั้ง 3 รูปแบบมีดังนี้
S3slider ขนาดเล็ก
<div id="slider">
<ul id="sliderContent">
<li class="sliderImage">
<img src="ใส่ URL ของรูปภาพขนาด400 x 300" />
<span class="top"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>
</li>
<li class="sliderImage">
<img src="ใส่ URL ของรูปภาพขนาด400 x 300" />
<span class="top"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>
</li>
<li class="sliderImage">
<img src="ใส่ URL ของรูปภาพขนาด400 x 300" />
<span class="top"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>
</li>
<li class="sliderImage">
<img src="ใส่ URL ของรูปภาพขนาด400 x 300" />
<span class="top"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>
</li>
<li class="sliderImage">
<img src="ใส่ URL ของรูปภาพขนาด400 x 300" />
<span class="top"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>
</li>
<!--แทรกโค้ดชุดใหม่ตรงนี้-->
<div class="clear sliderImage"></div>
</ul>
</div>
<!-- // slider -->
S3slider ขนาดใหญ่แบบที่ 1
<div id="slider1">
<ul id="slider1Content">
<li class="slider1Image">
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />
<span class="left"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>
</li>
<li class="slider1Image">
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />
<span class="right"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>
</li>
<li class="slider1Image">
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />
<span class="right"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>
</li>
<li class="slider1Image">
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />
<span class="left"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>
</li>
<li class="slider1Image">
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />
<span class="right"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>
</li>
<!--แทรกโค้ดชุดใหม่ตรงนี้-->
<div class="clear slider1Image"></div>
</ul>
</div>
<!-- // slider1 -->
S3slider ขนาดใหญ่แบบที่ 2
<div id="slider2">
<ul id="slider1Content">
<li class="slider1Image">
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />
<span class="top"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>
</li>
<li class="slider1Image">
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />
<span class="left"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>
</li>
<li class="slider1Image">
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />
<span class="bottom"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>
</li>
<!--แทรกโค้ดชุดใหม่ตรงนี้-->
<li class="slider1Image">
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />
<span class="right"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>
</li>
<li class="slider1Image">
<img src="ใส่ URL ของรูปภาพขนาด 720 x 300" />
<span class="bottom"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>
</li>
<div class="clear slider1Image"></div>
</ul>
</div>
<!-- // slider1 -->
แนวทางปรับแต่ง HTML โค้ด
3.1 การเพิ่มหรือลดจำนวนรูปภาพให้เพิ่มหรือชุดโค้ดต่อไปนี้เข้าไปตามความต้องการ
<li class="slider1Image">
<img src="ใส่ URL ของรูปภาพ" />
<span class="bottom"><strong>ใส่หัวข้อ</strong><br />ใส่ข้อความอธิบายภาพ</span>
</li>
3.2 การกำหนดทิศทางการปรากฎของข้อความให้เปลี่ยนค่าได้ที่
<span class="left"> ซึ่งคุณสามารถเปลี่ยนเป็น <span class="right"> หรือ <span class="top"> หรือ <span class="bottom"> ขั้นที่ 4 ตำแหน่งในการติดตั้ง HTML
การติดตั้ง HTML สามารถทำได้หลายวิธีดังนี้
4.1 ใช้วิธี Add Gadget ชนิด HTML/จาวาสคริปต์ (วิธีนี้เหมาะกับ S3slider ขนาดเล็ก แต่ก็ใช้กับขนาดใหญ่ได้)
4.2 ติดตั้งลงไปในส่วนหัวของแม่แบบ
สำหรับแม่แบบรุ่นเก่าให้ค้นหาโค้ด
<div id='content-wrapper'>ซึ่งบางแม่แบบอาจพบโค้ดเป็น
<div id='content'>และวาง HTML ของ S3slider ลงไปก่อนหน้าโค้ดดังกล่าว
และสำหรับแม่แบบรุ่นใหม่ให้ค้นหาโค้ด
<div class='fauxborder-left tabs-fauxborder-left'>และวาง HTML ของ S3slider ลงไปก่อนหน้าโค้ดดังกล่าว
4.3 ติดตั้งลงไปใน page หรือบทความ
ถ้าต้องการติดตั้งลงไปใน page หรือบทความ คุณจะต้องคลิกที่แท็บ แก้ไข HTML เสียก่อนจากนั้นจึงวาง HTML ของ S3slider ลงไป
4.4 คุณสามารถติดตั้ง S3slider มากกว่า 1 ตำแหน่งในหนึ่งหน้าโดยมีเงื่อนไขว่าในแต่ละตำแหน่งจะต้องใช้ชื่อ ID ไม่ซ้ำกัน
เช่น ถ้าคุณติดตั้ง S3slider ที่มี ID เป็น id="slider" ไปแล้ว ตำแหน่งอื่นๆ ที่ติดตั้งก็จะต้องใช้ ID เป็น id="slider1" เป็นต้น
หวังว่าคงชอบ Slideshow ชนิดนี้กันนะครับ หากมีข้อสงสัยในการติดตั้งโปรดสอบถามที่บทความนี้ สวัสดีครับ
หมายเหตุ : คุณควรจะดาวน์โหลดจาวาสคริปต์ http://siiam.bravehost.com/s3Slider.js สำรองเก็บไว้ และหากเป็นไปได้ควรจะ upload เพื่อใช้งานเอง ขอบคุณครับ
No comments:
Post a Comment