7 ต.ค.53 lightbox เป็นชุดสคริ๊ปสำหรับเปิดภาพเป็น layer ใหม่ในเว็บเพจเดิม พัฒนาโดย huddletogether.com จากการทดสอบใน gallery ของ joom พบว่าแต่ละภาพมีขนาดไม่สม่ำเสมอ ถ้าไม่ปรับ code ก็จะควบคุมการแสดงผลไม่ได้ แต่ทดสอบกับ gallery ของ ynalumni พบว่าใช้งานได้ดี เพราะภาพทั้งหมดได้มาจาก facebook ซึ่งมีการปรับความกว้างของทุกภาพให้เท่ากัน และไม่กว้างเกินขนาดของ windows จึงสะดวกในการใช้ previous หรือ next พบว่ามีการใช้งานในหลายเว็บไซต์ เช่น toptenthailand.com หรือ sopitthaspa.com
การกำหนดความสูง ของ lightbox : ทำได้โดยกำหนดใน lightbox.css โดยเติม top:0!important; เข้าไปใน #lightbox{ }
การติดตั้ง lightbox ในแฟ้ม .htm : ทำได้โดยส่ง 6 แฟ้ม คือ lightbox.css builder.js effects.js lightbox.js prototype.js scriptaculous.js เข้าไปในห้องที่เก็บแฟ้ม .htm แล้วเพิ่ม 4 บรรทัดนี้เข้าไปในส่วนหัวของ .htm แล้ว link ของภาพ ก็เติม rel=”lightbox[roadtrip]” หรือ rel=”lightbox” เข้าไป เช่น <a href=”burin.jpg” rel=”lightbox[roadtrip]”><img src=”burin.jpg”></a>
code 4 บรรทัดสำหรับ .htm
<link rel=”stylesheet” href=”lightbox.css” type=”text/css” media=”screen” />
<script src=”prototype.js” type=”text/javascript”></script>
<script src=”scriptaculous.js?load=effects,builder” type=”text/javascript”></script>
<script src=”lightbox.js” type=”text/javascript”></script>
แนะนำเว็บไซต์
http://www.huddletogether.com/projects/lightbox2/releases/lightbox2.04.zip
http://www.thaiall.com/java/lightbox/lightbox204a.zip
http://www.thaiall.com/java/lightbox/lightbox.htm
http://www.thaiall.com/actress/joom.htm
http://www.thaiabc.com/ynalumni/photo.asp
One thought on “การสั่งเปิด image เป็น layer ใหม่ในเว็บพจเดิม”