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 รูปแบบหนึ่งครับ