FuKDuK

เว็บเล็กๆ นำเสนอข้อมูลไม่มาก เปลี่ยนข้อมูลไม่บ่อย
สำหรับคนที่เขียนโค้ดเป็น จะลองเขียนเว็บขึ้นมาเองก็ไม่ได้ยากอะไรค่ะ
สามารถปรับแต่งรูปแบบได้ตามใจนึกเช่นกัน
อาจจะเร็วกว่าการไปตามหา plugin ของ CMS ที่ตรงใจเราเสียอีก
ดังนั้น การทำเว็บแบบดิบๆ บางครั้งก็เป็นทางเลือกที่น่าสนใจกว่า CMS ได้นะคะ
เมื่อมีโจทย์คือ "คลิกที่รูปเล็ก แล้วต้องการให้แสดงรูปใหญ่"
(คล้ายๆ แบบของ Blog Fukduk นี้ล่ะค่ะ)  วิธีเบสิค (บ้านๆ) สุดๆ คือ ..
ใส่รูปเป็นลิงค์ไปเลยด้วยโค้ด html กำหนดรูปเล็ก ให้เป็นลิงค์ที่ชี้ไปที่รูปใหญ่

แต่ถ้าอยากมีลูกเล่นเพิ่มขึ้นอีกหน่อยจะเขียนเองด้วย Javascript ก็ได้
หรือถ้ายังไม่เก่ง Javascript ทาโกะแนะนำให้ลองใช้ Light box ดู
เข้าไปที่หน้าเว็บของเขา คลิก Download แล้วคลิกที่ Lightbox v2.04 [ตามภาพนี้]

จะได้ไฟล์ lightbox2.04.zip มา
ให้ unzip จะได้ 3 โฟลเดอร์ กับ index.html 1 ไฟล์ [ตามภาพนี้]
นำ 3 โฟลเดอร์ที่เห็นอัพโหลดไปไว้บน Server เว็บที่ต้องการใช้ Light Box

ทำภาพเล็ก และใหญ่ที่ต้องการ ใส่ในโฟลเดอร์ photo
แล้วอัพโหลดโฟลเดอร์ photo ขึ้นไปบน Server
จากนั้นเพิ่มโค้ด html เข้าไปที่ส่วน head ดังนี้
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

และเพิ่ม rel="lightbox[photo1]" title="คำอธิบายภาพ" ลงไปในคำสั่งลิงค์ภาพ
โค้ดของไฟล์เว็บจะได้คล้ายๆ แบบนี้ [คลิกดูภาพ]
เท่านี้ก็สำเร็จขั้นตอนเปลี่ยนหน้าเว็บเดิม ให้ดูไฮโซขึ้นเป็นกอง [ตามภาพนี้]
ลองไปหัดใช้งานกันดูนะคะ น่าจะเป็นประโยชน์สำหรับเพื่อนๆ ที่อยากหัดเขียนเว็บเองดูบ้่าง

การมีพื้นฐานการเขียนโค้ดดิบๆ ที่ดี
ส่งผลให้สามารถแก้ (แกะ+เกลา) โค้ดเว็บยากๆ ได้ด้วย
CMS ตัวเดิมใช่จะคงอยู่ตลอดไป ขึ้นอยู่กับว่า..
เลือกจะเป็นคนใช้งานอย่างเดียว หรือเลือกจะเป็นคนแก้ไข/พัฒนา ต่อยอดด้วย
นั่นเป็นทางเลือกของแต่ละคน แล้วแต่ถนัดนะคะ ( ^^ )

ก่อนจบ Entry นี้~
ขอขอบคุณ Free Script ดีๆ จากคุณ Lokesh Dhakar
และถ้าหากเพื่อนๆ ชอบใจอย่าลืมกดโหวต เอ้ย! อย่าลืม Donate ให้เขานะคะ
ที่ http://www.lokeshdhakar.com/projects/lightbox2/