แสดงภาพ Panorama กับ jQuery

มีงานจ้างชิ้นนึง ให้ผมทำการแสดงผลภาพ Panorama บนเว็บ จะใช้อะไรก็ได้ ไอ้เราก็ถนัด Flash ซะด้วย ไม่ต้องพูดถึง (ประชด)… ลังเลอยู่ไม่นาน (ประมาณ 5 วินาที) ตัดสินใจลองของด้วย jQuery ทันที

อุปกรณ์ที่จำเป็น แน่นอนก็คือ jQuery และอุปกรณ์เสริมคือ dimension สำหรับ jQuery ที่เหลือคือ ทำ Plugin สำหรับ jQuery ขึ้นมาตัวนึง เพื่อตอบโจทย์ดังนี้

1. สามารถแสดงภาพ Panorama แบบไม่ต้องวนได้
2. การเลื่อนภาพ ให้มีปุ่ม เมื่อเอาเมาส์ไปวาง ภาพจะเลื่อนอัตโนมัติ

หลังจากที่ได้โจทย์ ก็เลยทำการเพิ่มโจทย์ให้กับตัวเองลงไปอีกนิด เพื่อเพิ่มดีกรีัความมันส์

1. ใน 1 หน้า ต้องสามารถวาง Panorama ได้หลายภาพ
2. ปุ่ม 1 ปุ่ม จะ Control ภาพ Panorama ได้กี่ภาพก็ได้
3. ปุ่มหลาย ๆ ปุ่ม จะ Control ภาพ Panorama ภาพเดียวก็ได้
4. ปุ่ม จะเป็นอะไรก็ได้ จะเป็น Text หรือ รูปภาพก็ได้

งานนี้ dimension ช่วยลดภาระได้มาก ที่เหลือก็เป็นเรื่องของการเปลี่ยนแปลง stylesheet ตอน runtime เท่านั้น งานเลยออกมาอย่างที่แสดงใน LIVE DEMO

ใครสนใจ View Source แล้ว Copy Code ไปใช้ได้เลยครับ ไม่หวง ผมทำ JSPack ไว้ เอาไปแกะเองนะครับ