เปิดรูปภาพแบบเก๋า ๆ ด้วย jQuery Lightbox

admin · 11-02-2009, 02:14 PM

พอดีเห็นบทความที่น่าสนใจสำหรับคนอยากเรียนรู้การใช้งาน AJAX
เลยเก็บมาฝากครับ บทความนี้จะแนะนำการเปิดรูปแบบไม่ต้องโหลดเพจใหม่ เป็นการเปิดแบบ popup ที่ไม่ใช่ popup งงมั้ย 555+ งงไม่เป็นไรเรามีตัวอย่างครับ

ผมได้แงะบทความมาจาก (ต้องขอบคุณไว้ ณ ที่นี้)
http://warren.mesozen.com/jquery-lightbox/

ก่อนอื่นดาวน์โหลด Source ไปก่อนหละกันครับ
http://warren.mesozen.com/go.php?htt...q=#makechanges

ตอนที่ 1 - การติดตั้ง
ก่อนอื่นต้องทำการติดตั้ง โค้ดส่วนนี้ลงในเว็บเพจของคุณก่อน

Code:

<script type="text/javascript" src="jquery.js"></script><script type=”text/javascript” src=”lightbox.js”></script>

ตอนที่ 2 - ติดตั้ง CSS
แทรกโค้ด CSS ส่วนหัวของเว็บครับ

Code:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

* ต้องแน่ใจนะครับว่าในส่วนของ CSS ที่ตั้งรูปภาพถูกต้องแล้ว

ตอนที่ 3 - เป็นการสร้างลิ้งให้กับรูปภาพที่ต้องการ
แทรก rel="lightbox" ลงในแท็กของรูปภาพที่ต้องการครับ เช่น

Code:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

หรือถ้าเป็นลิ้งตัวอักษร ก็ใส่แบบด้านล่างนี้ก็ได้

Code:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a><a href=”images/image-2.jpg” rel=”lightbox[roadtrip]”>image #2</a><a href=”images/image-3.jpg” rel=”lightbox[roadtrip]”>image #3</a>

ลอง ๆ ประยุกต์เล่นกันต่อดูนะครับ