adkdev // Just another web development blog

แปลกใจตัวเองอยู่เหมือนกัน ว่าทำไม เราไม่เคยเขียนถึง สคริปส์ ตัวนี้หว่า…O_o มีแต่เขียนอ้างถึงเฉยๆ เอาหละวันนี้ ก็ขอเขียนสักหน่อยก็แล้วกันนะ อาจจะเป็นเรื่องเก่าแล้ว แต่สคริปส์ตัวนี้ก็เก๋าอยู่พอตัว 555+

Lightbox 2 เป็นสคริปส์ที่เอาไว้แสดงรูปภาพ โดยที่เมื่อเราคลิกที่รูป จะมีหน้าต่างขึ้นมา
(แต่ไม่ใช่ Popup windows นะ) โดยหน้าต่างนั้นจะปรากฏที่หน้าเว็บเดิม โดยจะมีการสร้าง Layer ขึ้นมาทับหน้าเว็บเดิม เพื่อแสดงรูปภาพนั้นๆ และเมื่อเราคลิก ที่ layer ที่เป็นพื้นหลัง (Background) สคริปส์ก็จะทำการปิดรูปภาพ พร้อมกับแสดงหน้าเว็บเดิม โดยที่ไม่มีการโหลดหน้าเว็บใหม่ แต่อย่างใด ดังตัวอย่างข้างล่าง

คงเห็นภาพกันแล้วนะครับ ฉนั้น หากสนใจเชิญดาวโหลดมาใช้กันได้ตามสะดวกครับ
โดยไปที่เว็บ Lightbox 2 จากนั้นก็กดดาวโหลด
สคริปส์ตัวนี้ ใช้ Prototype.js และ Script.acul.us ในการสร้าง Effect ต่างๆ
แต่ไม่ต้องไปหาดาวโหลดมาเพิ่ม เพราะในไฟล์ที่ดาวโหลดมา เขาได้เตรียมให้มาแล้ว

ส่วนวิธีการใช้งานนั้นก็แสนจะง่ายดาย เพียงแค่เรียกไฟล์ Javascript เข้ามาในไฟล์ HTML

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

จากนั้นก็เรียกใช้ไฟล์ CSS

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

จากนั้นก็เช็กดูว่า ภาพ prev.gif, next.gif, loading.gif และ close.gif อยู่ถูกที่รึเปล่า โดยสามารถตรวจสอบ และ กำหนดค่าได้ในไฟล์ lightbox.js

ต่อมาก็ถึงเวลาใช้งานกัน โดยการเพิ่ม attribute rel=”lightbox” เข้าไปในลิงค์ที่ลิงค์ไปหารูปภาพ เช่น

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

และถ้าหากต้องการที่จะทำให้เป็นเซ็ตของรูปภาพ เพื่มให้มีปุ่ม Next และ Prev (Previous) ก็กำหนดดังนี้

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

โอ้ … เย… ใช้งานได้แล้ว ง่ายจริงๆ แถมดูดีมีสไตล์อีกต่างหาก และถ้าอยากปรับแต่งรูปแบบให้เข้ากับเว็บตัวเองก็สามารถทำได้โดยแก้ที่ไฟล์ lightbox.css

หากใครเห็นว่าดีมีประโยชน์ และมีทรัพย์เยอะก็สามารถบริจาคได้ครับ คนทำจะได้มีกำลังใจ *-* (ไม่ใช่บริจาคให้ผมนะ บริจาคให้คนทำ Lightbox เค้า…)

ปล. ตัวอย่างข้างบนนี้ ผมใช้ Pluginsของ Wordpress ซึ่งได้มีคนเขียนไว้ และก็มีคนดาวโหลดไปใช้เยอะเหมือนกัน ใครใช้ Wordpress อยู่ก็ลองเอามาใช้ได้ครับ