การแสดง Slideshow ด้วย Javascript
การติดตั้งใช้งาน
<div id="main_slide" style="background-color: #000; overflow:hidden;"></div>
<script>
var slide = new GBanner('main_slide');
slide.add('http://school.gcms.in.th/upload/slideshow/1.jpg','Image 1','http://www.goragod.com');
slide.add('http://school.gcms.in.th/upload/slideshow/2.jpg','Image 2','http://gcms.goragod.com');
slide.add('http://school.gcms.in.th/upload/slideshow/3.jpg','Image 3','http://www.siamlearning.org');
slide.playSlideShow();
</script>การใช้งานสามารถทำได้ด้วยการเขียนคำสั่ง Javascript ลงใน Template หรือใน Editor ที่หน้าที่ต้องการในโหมด ดูรหัส HTML ดังโค้ดด้านบน
<div id="main_slide" style="background-color: #000; margin-bottom: 10px; height:290px;"></div>โค้ดด้านบนเป็นการเตรียมพื้นที่สำหรับแสดงไสลด์ ซึ่งการแสดงผลอยู่ภายใต้คลาส gbanner
var slide = new GBanner(id, options);เป็นคำสั่งเรียกใช้ GBanner ซึ่งเป็น Javascript สำหรับทำงานนี้โดยเฉพาะ
- id คือ id ของพื้นที่ส่วนแสดงผลที่ต้องการแสดง Slide
- options คือ ตัวเลือกเพิ่มเติมของ GbtnSlide (ไม่ระบุก็ได้)
- buttonClass CSS class ของส่วนที่แสดงปุ่ม (ปกติ button_gbtnslide)
- loadingClass CSS class ของตัว loading (ปกติ loading_gbtnslide)
- slideTime ช่วงเวลาการแสดงแต่ละ Slide (ปกติ 10000 หรือ 10 วินาที)
- target กำหนดการเปิดหน้าเมื่อคลิกที่รูปภาพ (ปกติ _blank)
- loop กำหนดการวนรอบกลับมาแสดงผลที่รูปแรกใหม่เมื่อแสดงผลครบทุกรูปแล้ว (ปกติ true แสดงเป็นวงรอบ)
slide.add(iamge_url, detail, url);add เป็นคำสั่งสำหรับเพิ่มรูปภาพที่ต้องการแสดง
- พารามิเตอร์ตัวแรกคือ URL ของรูปภาพ
- พารามิเตอร์ตัวที่สอง คือ คำอธิบายสั้นๆ ซึ่งจะแสดงเมื่อเอาเมส์ชี้ไปบนรูป
- พารามิเตอร์ตัวสุดท้าย คือ URL ที่จะเรียกไปหากมีการคลิกที่รูป
slide.playSlideShow();สุดท้าย playSlideShow เป็นคำสั่งเพื่อเริ่มเล่น Slide ครับ
ย้ำอีกครั้ง การเขียนคำสั่งนี้สามารถทดแทนได้ด้วยการใช้ Widget Textlinks ซึ่งจะใช้งานได้ง่ายกว่า และมีติดตั้งแล้วอยู่บน GCMS