GCMS Ajax CMS

เว็บสำเร็จรูป เว็บสำเร็จรูปภาครัฐ เว็บโรงเรียน เว็บไซต์ส่วนตัว ระบบบริหารจัดการเว็บไซต์ (CMS) ฟรี

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

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


การติดตั้งใช้งาน
<div id="main_slide" style="background-color: #000; margin-bottom: 10px; height: 290px; 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

ผู้เขียน Goragod

โพสต์เมื่อ 23 มี.ค. 2554

ความคิดเห็น 0

เปิดดู 4,599

ป้ายกำกับ SlideshowWidget

เรื่องที่เกี่ยวข้อง

^