การแสดง 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 ครับ