วันพุธที่ 1 ธันวาคม พ.ศ. 2553

แสดงสินค้าหน้าร้าน ตอนที่ 4 ซูมรูปสินค้าด้วย TopUp (Jquery)

ดูผลลัพธ์ของโปรแกรมก่อนเลยคับ โดยให้คลิกที่รูปเพื่อขยาย
Blog สอนสร้าง Web E-Commerce ด้วย PHP + MySQL ในวันนี้ผมจะสอนเขียน Code เพื่อ ขยายรูป(Zoom Images)สินค้าโดยใช้ Pugin ของ Jquery ตัวนึง ชื่อว่า TopUp ให้ท่านDownload จากตรงนี้เลยคับ ซึ่งผมได้แก้ไข Code บางส่วนให้สามารถใช้งานร่วมกับระบบ E-Commerce นี้คับ หลังจากที่ท่านได้Download ไฟล์ที่ผมแจกให้เรียบร้อยแล้ว ให้ทำการแตกไฟล์ จะได้ Folder ที่ชื่อว่า zoomimg ให้Copy ทั้ง Folder ไปไว้ใน Folder jquery ประมาณนี้คับ
กำหนดPathเก็บFolder zoomimg
จากนั้นให้เปิดไฟล์ fp_showpd_detail.php ขึ้นมา  ในส่วนของแท็ก head ให้พิมพ์ Code ลงไปตามนี้คับ


ในส่วนของHTMLให้พิมพ์เรียกใช้งาน ตามรูปแบบนี้คับ

ดู Code ทั้งหมดกันเลยคับ

ไฟล์ fp_showpd_detail.php (Code)

ให้ท่านแก้ไข Source Code  ในไฟล์ fp_showpd_detail.php ตามในกรอบสีแดงเลยคับ หากขี้เกียจพิมพ์ ให้ Copy Soure Code ทั้งหมด ของไฟล์ fp_showpd_detail.php ตามนี้เลยคับ(ไฟล์ design.css ให้ Copy Code Css ตามLinkนี้คับ http://panuwat.orgfree.com/crochet/design.css)

ดูผลลัพธ์ของโปรแกรมได้จากที่นี่
พบกับการสอนสร้าง Web E-Commerce ด้วย PHP + MySQL ในบทความตอนต่อไป
บทความที่เกี่ยวข้อง
แสดงสินค้าหน้าร้าน ตอนที่ 3
แสดงสินค้าหน้าร้าน ตอนที่ 2
แสดงสินค้าหน้าร้าน ตอนที่ 1

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

  1. อยากให้แสดงรายละเอียดสินค้าด้วยค่ะ ใช้ตัวแปรอะไร แล้วเปลี่ยนสีกล่องได้มั้ยค่ะ เปลี่ยน css ตรงไหน

    ตอบลบ
    คำตอบ
    1. Plugin JQuery ตัวนี้ มีความสามารถแค่แสดงได้แค่รูปเท่านั้นครับ ไม่สามารถแสดงรายละเอียดได้
      แนะนำให้ใช้ตัวนี้ดีกว่าครับ -> http://leandrovieira.com/projects/jquery/lightbox/
      สำหรับการใช้ภาษาไทยให้ทำตามในเว็บนี้ครับ->http://itshee.exteen.com/20090115/jquery-lightbox

      ลบ