ซูมรูปสินค้าด้วย Highslide

           บทความนี้จะสอนท่านเขียน Code PHP ดึงข้อมูลสินค้าจากฐานข้อมูล MySQL และเราจะโฟกัสไปที่การแสดงผลรูปภาพของสินค้า โดยเราจะมีการเขียนคำสั่งซูมรูปภาพของสินค้าโดยใช้สคริปต์ซูมรูปภาพที่ชื่อว่า Highslide ครับ เป็นสคริปต์ที่เขียนด้วย จาวาสคริปต์ ความสามารถของมันคือ สามารถซูมรูปภาพและสามารถแสดงผลรูปภาพเป็นแบบGalleryได้อีกด้วยครับ สำหรับเรื่องของการซูมรูปภาพ ผมเคยได้สอนมาแล้วครั้งนึงในบทความนี้  http://php-for-ecommerce.blogspot.com/2010/11/4-topup-jquery.html  โดยใช้ตัวซูมรูปภาพที่ชื่อว่า Topup พัฒนาจาก Jquery (Javascript Framework) แต่มีFeatureที่ด้อยกว่าHightslideมากเลยครับและพัฒนาช้ากว่าด้วย ผมก็เลยอยากจะแนะนำให้มาใช้ Highslide ดีกว่าครับ

ปล.Highslide ไม่ได้เขียนด้วยJqueryนะครับ

          มาดูวิธีใช้งานกันเลยครับ ก่อนอื่นไปดาวน์โหลด HighSlide มาติดตั้งที่เครื่องก่อน  ดาวน์โหลดได้จากเว็บไซต์นี้->www.highslide.com สำหรับวิธีติดตั้งของผมคือ แตกโฟลเดอร์ออกมาแล้วตั้งชื่อว่า hightslide แล้วสร้างโฟลเดอร์ชื่อ js แล้วเอาโฟลเดอร์ hightslideไปไว้โฟลเดอร์ js ดังรูป

ติดตั้ง Highslide

       
ลำดับต่อไป จากบทความก่อนหน้านี้ ว่าด้วยเรื่องของ การแสดงสินค้าในตาราง(Table) โดยแบ่งข้อมูลเป็นคอลัมน์ เราจะนำโค๊ดจากบทความนี้มาดัดแปลงนิดหน่อยและเพิ่มเติม Code ซูมรูปภาพเข้าไปครับ จะได้ Code ทั้งหมดดังนี้

เมื่อได้พิมพ์โค๊ดข้างบนได้ถูกต้องสมบูรณ์แล้ว จะได้ผลลัพธ์ ดังรูป

แสดงข้อมูล 3 คอลัมน์ต่อ 1 แถว ที่แถวสุดท้ายเป็น2 เพราะมีสินค้าอยู่ฐานข้อมูลแค่ 8 ชิ้นเท่านั้น ดังนั้น ผลลัพธ์ที่ได้คือ  3,3,2 นั้นเอง

ผลลัพธ์เกิดจากการที่เราคลิกที่รูปสินค้า แล้วรูปสินค้าจะค่อยๆซูมออกมาครับ