GAJAX บทที่ 12

GCrossFade Class สำหรับการแสดง effect กับรูปภาพ ในลักษณะ Fade In และ Fade Out สามารถใช้เพิ่มความน่าสนใจให้กับรูปภาพ หรือ ใช้สำหรับทำ Slide Show แบบง่ายๆได้

play คำสั่งเริ่มเล่น Slide Show
pictures กำหนด ไฟล์รูปภาพที่ต้องการแสดง โดยสามารถกำหนดพร้อมกันได้หลายๆไฟล์พร้อมกัน โดยคั่นแต่ละไฟล์ด้วย ลูกน้ำ (,)
Pos คืนค่า ID ของรูปภาพที่กำลังแสดง เิริ่มต้นที่ 0 โดยที่ ID นี้เกิดจากการแบ่งตัวแปรที่ได้จาก pictures ออกเป็น Array

var ss = new GCrossFade(element,options);

ss.pictures('path/to/1.jpg,path/to/2.jpg,path/to/3.jpg');

element คือ พื้นที่แสดงผลรูปภาพที่ต้องการครับ
คำสั่ง pictures จะทำการเพิ่มไฟล์รวมพาธไปยัง GCrossFade
play สำหรับสั่งให้เล่น slide show ในกรณีที่ ไม่ได้สั่งให้เล่นอัตโนมัติ หรือ หยุดเล่นไปแล้ว โดยจะเล่นต่อจากรูปปัจจุบัน
options เป็นข้อมูลชนิด hash มี property คือ
            speed: ระยะห่างการเล่น slide show แต่ละรูป (10)
            loop: วนลูปเล่นซ้ำหรือไม่หลังจากเล่นไฟล์จนครบแล้ว true วนลูป, false หยุด เมื่อเล่นจบแล้ว (true)
            auto: เริ่มเล่น slide show อัตโนมัติหรือไม่เมื่อกำหนดไฟล์ให้แล้ว true เล่นอัตโนมัติ, false แสดงรูปแรกเท่านั้น (true)
            onChanged: อีเวนต์เมื่อ Fade In รูปภาพเสร็จแล้ว สามารถอ่าน id ของรูปที่เล่นได้จาก property Pos ของ GCrossFade

หมายเหตุ * สีชมพูคือค่า default

ตัวอย่างการใช้งานเป็น slide show

<style type="text/css">

#SlideShow {

  float: left;

  width: 80px; /* ความกว้างของ slide show */

  height: 80px; /* ความสูงของ slide show */

  position: relative;

  background-color: #000000;

}

</style>

<!-- เรียกใช้ GAJAX --!>

<script src = "ajax/gajax.js" type="text/javascript"></script>



<!-- พื้นที่แสดงผลรูปภาพ --!>

<div id="SlideShow">&nbsp;</div>

<!-- พื้นที่แสดงผลข้อความ --!>

<div id="ssResult"></div>



<script type="text/javascript">

/* กำหนดรูปภาพทีจะแสดงเป็น Array */

var pics = ['../datas/users/goro/image/m7a3c3.jpg','../datas/users/goro/image/egahru.jpg'];

$G('SlideShow').Ready(function(){

  var ss = new GCrossFade('SlideShow',{'auto':true,'onChanged':function(){

    /* แสดงชื่อไฟล์เมื่อ Fade In รูปภาพเรียบร้อยแล้ว */

    $E('ssResult').innerHTML = pics[ss.Pos];

  }});

  ss.pictures(pics.join(','));

});

</script>

pics เป็น แอเรย์เก็บรูปภาพที่ต้องการแสดง ครับ โดยกำหนดภาพทั้งหมดลงใน array ในคราวเดียว การใช้เครื่องหมาย [...] กับตัวแปร เป็นรูปแบบการกำหนด array ของ Javascript รูปแบบหนึ่งครับ

ตัวอย่าง :