ไ้ด้เจอของเล่นตัวนึง รู้สึกว่ามันจะสร้างให้เว็บเราๆ ท่านๆ เนี่ย หรูหรามากทีเีดียว มันคือ Lightbox JS (ลองดูตัวอย่างใน site ละกันครับ)

มาดูวิธีติดตั้งกัน อันดับแรกก็ต้อง Download กันก่อน จากนั้นก็ทำการ upload file ต่างๆ ไปไว้บน host แล้วจึง include javascript พวกนี้เข้ามา

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

จากนั้นก็ include css เข้ามาอีก

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

แล้วอย่าลืมนะครับ ว่า upload รูปต่างๆ ที่มันต้องการใช้ไปไว้บน host เรียบร้อยแล้ว

จากนั้น มาดูการใช้งานบ้าง ขั้นตอนแรก แค่เพิ่ม rel="lightbox" ไปใน <a> เช่น

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

เพียงแค่นี้ เราก็สามารถเรียก image popup เท่ๆ มาดูได้แล้ว

ยังไม่พอ มันยังเรียกเป็นกลุ่มๆ ได้อีก ดังนี้

<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>

เพียงแค่เพิ่ม group name เข้าไป มันจะสามารถเรียกดูโดยมีปุ่ม next กับ previous ได้อีกด้วย ในกรณีที่เป็นกลุ่มๆ

เล่ามาตั้งนาน แล้วมัน on Wordpress ยังไง ==' มันมี plugin ครับ ที่นี่ -> http://zeo.unic.net.my/notes/lightbox-js-version-20/

เอา plugin ไปใช้ครับ ง่ายๆ ไม่ต้องเปลืองพลังอะไรมากมาย เพียงแต่ upload ที่มันมีให้(wp-lightbox2 folder) ไปไว้บน host ของเรา ใน plugin folder เวลาเรียกใช้ ก็เรียกเหมือนๆ เดิม ไป activate มัน ใน plugin

เพียงค่่นี้ ก็เท่ได้ในแบบ Wordpress แล้ว

ปล. เปลี่ยนเป็น Mephisto แล้ว :)

แก้ไขล่าสุด วันที่ 16 กรกฏาคม 2550 เวลา 21.32 น.