วันอาทิตย์ที่ 27 พฤศจิกายน พ.ศ. 2554

ซูมรูปสินค้าด้วย 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 นั้นเอง

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

2 ความคิดเห็น :

  1. ไม่ระบุชื่อ5 มีนาคม 2556 22:56

    ดาว์โหลดไฟล์ตรงไหนค่ะ Highslide ไปเว็บที่บอกแล้วก็หาที่ดาวน์โหลดไม่เจอ

    ตอบลบ
    คำตอบ
    1. ดาวน์โหลด Highslide ตามลิงค์นี้ครับ -> http://www.highslide.com/download.php
      ให้เลือก Version ล่าสุดเลยครับ แล้วกดปุ่ม Download now!

      ลบ