การแสดง Slideshow ด้วย Javascript

จริงๆแล้วสำหรับ GCMS แล้ว การแสดง Slideshow ด้วย Widget Textlinks จะทำได้ง่ายกว่า แต่หากต้องการเขียนคำสั่ง Javascript เพื่อแสดง Slideshow ด้วยตัวเองก็ทำได้เช่นกัน โดยการเขียนคำสั่งเพื่อเรียกใช้ Javascript GBanner ซึ่งถูกติดตั้งมาพร้อมกับ Widget Textlinks

การติดตั้งใช้งาน

<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