วิธีสร้าง Lightbox Image Viewer ใน Blogger

บทความนี้เหมาะสำหรับคนที่ทำบล็อกเกี่ยวกับภาพถ่าย การแสดงภาพ หรือทำบล็อกเกี่ยวกับการ์ตูน เพราะเทคนิคนี้เป็นการแสดงรูปภาพใน blogger ที่มีความชัดเจนต่ำ ให้มีความน่าสนใจและชัดเจนมากขึ้น และสามารถโต้ตอบกับผู้อ่านได้ด้วย โดยทำให้การแสดงภาพปกติบนบล็อกเกอร์ สามารถแสดงแบบหน้าต่าง Pop up และขยายให้ชัดเจนมากขึ้น อีกทั้งยังช่วยให้ภาพในบทความแสดงแบบอัลบัมภาพได้ด้วย 

สำหรับตัวอย่างของบทความที่มีการแสดงภาพแบบ Lightbox ดูไดที่ DEMO ด้านล่าง

Light box image viewer

วิธีติดตั้งบน blogger

Log in เข้าไปที่ blogger >>  ไปที่แผงควบคุม >> รูปแบบ >> แก้ไข HTML >> ไม่ต้องขยายแม่แบบเครื่องมือ

ขั้นที่ 1 ติดตั้ง CSS โดยค้นหาโค้ด  ]]></b:skin> และวางโค้ดต่อไปนี้ก่อนหน้าโค้ดดังกล่าว

#lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} 
#lightbox img{ width: auto; height: auto;} 
#lightbox a img{ border: none; } 
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } 
#imageContainer{ padding: 10px; } 
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } 
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } 
#imageContainer>#hoverNav{ left: 0;} 
#hoverNav a{ outline: none;} 
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } 
#prevLink { left: 0; float: left;} 
#nextLink { right: 0; float: right;} 
#prevLink:hover, #prevLink:visited:hover { background: url(http://sites.google.com/site/hackublog/home/server/prevlabel.gif) left 15% no-repeat; } 
#nextLink:hover, #nextLink:visited:hover { background: url(http://sites.google.com/site/hackublog/home/server/nextlabel.gif) right 15% no-repeat; } 
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; } 
#imageData{    padding:0 10px; color: #666; } 
#imageData #imageDetails{ width: 70%; float: left; text-align: left; } 
#imageData #caption{ font-weight: bold;    } 
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }         
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}      
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } 
round-color: #000; } 
lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } 
round-color: #000; }





ขั้นที่ 2 ต่อเนื่องจากขั้นที่ 1 ขั้นนี้เป็นการติดตั้ง Java Script ซึ่งทำโดยค้นหาโค้ด </head> แล้ววางโค้ดต่อไปนี้ก่อนหน้าโค้ดดังกล่าว 

<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/> 
<script src='http://files.bloggerplugins.org/lbox/js/scriptaculous.js' type='text/javascript'/> 
<script src='http://siiam.bravehost.com/lightbox.js' type='text/javascript'/>

เมื่อจบขั้นที่ 2 แล้วให้บันทึกแม่แบบ 


ขั้นที่ 3 การสั่งให้รูปที่ตัองการแสดงผลแบบ lightbox 

3.1 ถ้าต้องการให้แสดงผลเพียงรูปเดียว หรือแสดงผลทีละรูป ให้ เพิ่มโค้ด rel="lightbox"  และ title="ใส่คำอธิบายภาพ" ลงไปในโค้ดรูปภาพที่ต้องการ ซึ่งจะได้โค้ดรูปภาพที่ต้องการเป็น 

<a rel="lightbox" title="ใส่คำอธิบายภาพ" href="ใส่ URL ของภาพ"><img alt="" src="ใส่ URL ของภาพ" height="100" width="100" /></a>

ตัวอย่างโค้ดที่วางลงในขณะเขียนบทความ หรือโค้ดของภาพที่จะให้เกิด Lightbox 

<a rel="lightbox"  title="โอ้ทะเลแสนงาม ฟ้าสีครามสดใส"href="http://upic.me/i/0r/image0.jpg"><img alt="" src="http://upic.me/i/0r/image0.jpg" height="100" width="100" /></a>




3.2 ในกรณีที่ภาพของคุณถูก Upload ขึ้นไปยัง blogger โดยตรง(ไม่ได้ฝากรูปไว้ที่ host อื่น) ก็ให้เขาไปแก้โค้ดดังนี้ 


Log in เข้าไปที่ blogger >>  ไปที่แผงควบคุม >> แก้ไขบทความ >> เลือกแก้ไขบทความที่ต้องการ และหาโค้ดรูปภาพที่ต้องการ และแก้ดังภาพต่อไปนี้ 



ให้ลบค่า Onblur ทิ้งทั้งหมดเพราะจะเป็นค่าที่ทำให้ภาพไม่ชัด  และลบค่า –h ออกจาก s1600-h เพราะเป็นค่าที่ทำให้ภาพมีการแสดงผลไม่เต็มขนาด จากนั้นก็เพิ่มค่า rel="lightbox"  และ title="ใส่คำอธิบายภาพ" ลงไป เหมือนกับข้อ 3.1 


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

<a rel="lightbox[1]" title="ใส่คำอธิบายภาพ"href="http://img710.imageshack.us/img710/2984/96855778.jpg"><img alt="" src="http://img710.imageshack.us/img710/2984/96855778.jpg" height="200" width="300" /></a> 

<a rel="lightbox[1]" title="ใส่คำอธิบายภาพ"href="http://img32.imageshack.us/img32/4348/96078536.jpg"><img alt="" src="http://img32.imageshack.us/img32/4348/96078536.jpg" height="200" width="300" /></a> 

<a rel="lightbox[1]" title="ใส่คำอธิบายภาพ"href="http://img714.imageshack.us/img714/7115/64405026.jpg"><img alt="" src="http://img714.imageshack.us/img714/7115/64405026.jpg" height="200" width="300" /></a> 

<a rel="lightbox[1]" title="ใส่คำอธิบายภาพ"href="http://img716.imageshack.us/img716/4305/51947084.jpg"><img alt="" src="http://img716.imageshack.us/img716/4305/51947084.jpg" height="200" width="300" /></a> 

<a rel="lightbox[1]" title="ใส่คำอธิบายภาพ"href="http://img710.imageshack.us/img710/3885/52425623.jpg"><img alt="" src="http://img710.imageshack.us/img710/3885/52425623.jpg" height="200" width="300" /></a>


ถ้าต้องการให้ภาพมีขนาดเล็กและเรียงชิดกันก็ให้แก้ค่าขนาดของภาพจาก height="200" width="300"เป็นขนาดที่ต้องการ เช่นแก้เป็น height="50" width="50"  และพิมพ์โค้ดของแต่ละภาพให้ติดกัน เช่นจากโค้ดข้างบน ภ้าปรับแต่งให้ภาพมีขนาดเล็กและติดกันจะได้โค้ดเป็น  


<a rel="lightbox[2]" title="ใส่คำอธิบายภาพ"href="http://img710.imageshack.us/img710/2984/96855778.jpg"><img alt="" src="http://img710.imageshack.us/img710/2984/96855778.jpg" height="50" width="50" /></a><a rel="lightbox[2]" title="ใส่คำอธิบายภาพ"href="http://img32.imageshack.us/img32/4348/96078536.jpg"><img alt="" src="http://img32.imageshack.us/img32/4348/96078536.jpg" height="50" width="50" /></a><a rel="lightbox[2]" title="ใส่คำอธิบายภาพ"href="http://img714.imageshack.us/img714/7115/64405026.jpg"><img alt="" src="http://img714.imageshack.us/img714/7115/64405026.jpg" height="50" width="50" /></a><a rel="lightbox[2]" title="ใส่คำอธิบายภาพ"href="http://img716.imageshack.us/img716/4305/51947084.jpg"><img alt="" src="http://img716.imageshack.us/img716/4305/51947084.jpg" height="50" width="50" /></a><a rel="lightbox[2]" title="ใส่คำอธิบายภาพ"href="http://img710.imageshack.us/img710/3885/52425623.jpg"><img alt="" src="http://img710.imageshack.us/img710/3885/52425623.jpg" height="50" width="50" /></a>




หมายเหตุ  หากในบล็อกหรือในบทความเดียวกันมีหลายอัลบัม อย่าตั้งชื่ออัลบัมให้ซ้ำกัน โดยอาจจะใช้ตัวเลขเป็นชื่ออัลบัม เช่น 

rel="lightbox[1]"  
rel="lightbox[2]" 
rel="lightbox[3]" เป็นต้น 

ตั้งชื่อแบบนี้ไปเรื่อย ๆ อย่าให้เกิดชื่อซ้ำกันเพราะหากชื่อซ้ำกัน และภาพเหล่านั้นมาอยู่ในหน้าเดียวกัน ก็จะกลายมาเป็นอัลบัมเดียวกันทันที

เคล็ดลับเพิ่มเติม

ถ้าหากคุณไม่ต้องการให้หน้าบล็อกแสดงหลาย ๆ ภาพพร้อมกันเนื่องจากจะต้องใช้เวลาในการโหลดภาพเป็นเวลานาน ก็ให้ดัดแปลงโค้ดในขั้นที่ 3 ซึ่งจะได้ผลลัพธ์ดังตัวอย่าง  คลิกเพื่อดูตัวอย่าง

เดิมนั้นหากอัลบัมภาพมีหลายภาพเราจะใช้โค้ดเหมือนข้างต้นที่กล่าวมาแล้วแต่ถ้าต้องการให้อัลบัมนั้นมีตัวแทนภาพเพียงภาพเดียว (เหมือนในตัวอย่าง) เราสามารถดัดแปลงโค้ดในขั้นที่ 3 เป็น 

<a rel="lightbox[1]"  title="ใส่คำอธิบายภาพ" href="http://img710.imageshack.us/img710/2984/96855778.jpg"> <img alt="" src="http://img710.imageshack.us/img710/2984/96855778.jpg" height="200" width="300" /> </a> 

<a rel="lightbox[1]" title="ใส่คำอธิบายภาพ" href="http://img32.imageshack.us/img32/4348/96078536.jpg"></a> 
<a rel="lightbox[1]" title="ใส่คำอธิบาย" href="http://img714.imageshack.us/img714/7115/64405026.jpg"></a> 
<a rel="lightbox[1]" title="ใส่คำอธิบาย" href="http://img716.imageshack.us/img716/4305/51947084.jpg"></a> 
<a rel="lightbox[1]" title="ใส่คำอธิบาย" href="http://img710.imageshack.us/img710/3885/52425623.jpg"></a>

โดยโค้ดสีม่วงจะเป็นโค้ดของภาพที่เป็นตัวแทนของอัลบัมนี้


หากคุณมีปัญหาในการปรับแต่งโปรดสอบถามเพิ่มเติม ผมขอจบบทความสอนการทำ blogger  อีก 1 บทความเพียงเท่านี้ครับ


เครดิต: bloggerplugins.org
EDIT: Hackublog