ThickBox : อีกหนึ่งตัวช่วยในการแสดงผลโดยใช้ jQuery

วันนี้ได้รับการแนะนำมาจาก Kidsdev เลยทำให้รู้จักอีกหนึ่งตัวช่วยในการแสดงผลบนหน้าเว็บไซต์ โดย ThickBox นั้นเป็น การแสดงหน้าต่าง มีลักษณะเป็นกรอบสี่เหลี่ยม โดยปรากฏขึ้นมาเพื่อแสดงข้อมูล, รูปภาพ หรือเพื่อสอบถามข้อมูล โดย ThickBox ถูกสร้างจาก jQuery library ที่มีกา่รใช้งานง่ายๆ ถึงแม้ว่าจะไม่ได้เขียนโค้ดเก่งก็สามารถเริ่มต้นได้ไม่ยาก

• ขั้นตอนการสร้าง ThickBox

1. ดาว์นโหลดไฟล์

– ไฟล์  thickbox.js หรือ  thickbox-compressed.js

– ไฟล์ CSS : ThickBox.css

– ไฟล์รูปอนิเมนชั่น :  loadingAnimation.gif

– ไฟล์ jQuery JavaScript library

2. อัพโหลดไฟล์ไปใว้บนเซิร์ฟเวอร์

3. เปิด Notepad หรือโปรแกรมที่จะใช้สร้างเวบอย่าง Dreamweaver ก็ได้

4. ที่ส่วนหัวของโค้ด ให้ทำการแทรกการอ้างอิงการใช้งานไฟล์jQuery JavaScript library ,  thickbox.js , ThickBox.css

<script type=”text/javascript” src=”path-to-file/jquery.js”></script>
<script type=”text/javascript” src=”path-to-file/thickbox.js”></script>
<link rel=”stylesheet” href=”path-to-file/thickbox.css” type=”text/css” media=”screen” />

5. แทรกโค้ดส่วนที่ต้องการแสดง ThickBox

• ตัวอย่างการใช้งาน ThickBox

– Single  and Gallery Image

– Inline Content

– iFramed Content

– AJAX Content

• ไปดูตัวอย่างโค้ดจาก : http://jquery.com/demo/thickbox/