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

สอนทำบล็อกของ blogger

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

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



วิธีติดตั้งบน 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&gt;#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

ตอนนี้มีความคิดเห็น : 14 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

  1. พี่ HackBlog คับ พอจะมีวิธีปรับแต่ง จากคลิ๊กที่รูป แล้วแสดง หน้าต่างที่แสดงรุป เป็น คลิีกที่ ลิ้งในบอทความ แล้วเด้งขึ้นเป็นหน้าต่าง VDO บ้างไม๊คับ ผมพยายาม ใช้คุณเกิ้ล หาแล้ว แต่ไม่ทราบถึง คำที่จะใช้ค้นหา+ค้นหาตามที่ตัวเองเข้าใจ ไม่เจอคับ ลบกวนพี่ HackBlog ช่วยแนะนำหน่อยคับ
    ปล.ขอบคุณคับ ด้วยความเคารพและนับถือ

  1. อิอิ ลืมเวปตัวอย่างคับ http://atcloud.com/story_categories/30?page=2

  1. เดี๋ยวลองดูก่อนนะครับว่าสคริปต์ในบทความนี้จะใช้ได้หรือเปล่า แต่ที่ได้แน่คือใช้ jQuery Popup

    ปัญหาคือ jQuery Popup ที่เคยใช้มันเรียกใช้งานแค่ลิงค์เดียว ยังไม่เคย Apply กับหลาย ๆ ลิงค์
    ทั้งหมดนี้ต้องลอง เดี๋ยวเลิกงานแล้วจะลองดูก่อนครับ

  1. หุหุหุหุ ขอบคุณคับพี่ HackBlog เป็นกำลังใจคับ สู้ๆๆๆ

  1. ขอบคุณมาก ๆ ครับ ลองเอาไปใช้แล้ว สวยงามไม่แพ้ pluing ของ cms ต่าง ๆ เลยครับ ถึงแม้จะยุ่งยากกับการ code หน่อยก็ตาม ^.^

  1. งง อ่ะคับ
    ช่วยสอนหน่อยได้ไหมคับ

  1. @ เจ้าชายน้ำลึก : ในตอนแรก script มีปัญหาครับ ผมแก้ให้แล้ว ลองทำใหม่อีกรอบ ติดขัดขั้นตอนไหนก็เจาะจงถามขั้นตอนนั้น ถ้าให้ผมสอน ผมก็ตอบว่าผมก็สอนเอาไว้ในบทความนี้อยู่แล้วครับ

  1. แจ่มแมวครับ ขอบพระคุณท่านมาก

  1. สวัสดีคะ
    ดิฉันใช้โค้ตแบบภาพที่เป็นตัวแทนของอัลบัมนี้ http://arthid-reading.blogspot.com/
    เวลาคลิกเข้าไปดูภาพมีขนาดใหณ่ไป หากต้องการลดขนาดลง(ให้พอดีกับหน้าจอไม่ต้องเลื่อนภาพขึ้นลง)ต้องปรับตรงไหนคะ

    ขอบคุณคะ

  1. เมื่อก่อนเคยใช้ lightbox ได้ แต่ทำไมอยู่ๆใช้ไม่ได้คะ เป็นเพราะเวปที่ฝากรูปหรือเปล่าคะ

    http://arthid-reading.blogspot.com/

  1. ขอบคุณคุณแฮค ตอนนี้ lightbox ใช้ได้ตามปกติแล้วคะ (1/11/54)

  1. ทำยังไงก็ไม่ได้ช้วยดูให้หน่อยได้มั้ยครับ อยุ่หรือป่าวไม่เคยเห็นตอบอะไรเลย

  1. พี่ครับอย่างรูป ที่ใหญ่มากๆ อย่าง
    http://digitalbuzz.s3.amazonaws.com/wp-content/uploads/2012/03/A-Day-In-The-Internet.jpg

    ทำเสร็จเวลาคลิกออกมากลายเป็น ภาพเล้กนิดเดียวเอง ผมต้องการให้มันแสดงขนาดจริงเลยทำได้อย่างไรหรอครับ

  1. คำอธิบาย title ในlightbox มีผลต่อการค้นหาของกูเกิ้ลมั้ยครับ

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel