Demo : http://leandrovieira.com/projects/jquery/lightbox/

Resource Download : http://leandrovieira.com/download/7/

plugin ตัวนี้ไว้ใช้สำหรับแสดงรูปภาพ เมื่อคลิกที่รูปภาพขนาดเล็กบนเพจแล้ว จะแสดงภาพขนาดใหญ่ พร้อมแอนิเมชั่น อย่างสวยงาม หลังจากที่ท่านได้ดาวน์โหลด Resource Download มาแล้ว แตกซิปออก ในนั้นก็จะมีตัวอย่างการใช้งานให้ศึกษาอยู่ไฟล์นึง สามารถศึกษาเพิ่มเติมจากที่ผมจะเขียนต่อไปนี้ ได้อีกทางหนึ่ง

วิธีการใช้งาน :

1. Include jquery และ lightbox เข้ามา

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>

2. Include lightbox css เข้ามา

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

3. ใส่ class=”lightbox” เข้าไปในลิ้งก์ ที่ชี้ไปยังรูปภาพขนาดใหญ่ ที่ต้องการแสดง

<a href="photos/image1.jpg" title="Images 1" class="lightbox">ภาพที่ 1</a>
<a href="photos/image5.jpg" title="Images 2" class="lightbox">ภาพที่ 2</a>

4. ใส่โค้ด javascript สั่งให้ lightbox ทำงาน

<script type="text/javascript">
 $(document).ready(function(){
   $(".lightbox").lightBox();
 }) 
</script>

เพียงเท่านี้ คุณก็จะแสดง thumbnail รูปภาพได้อย่างงดงาม

โค้ดทั้งหมดจะเป็นดังนี้ :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery lightBox plugin</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
<script type="text/javascript">
 
     $(document).ready(function(){
         $(".lightbox").lightBox();
     })
</script>
 
</head>
<body>
<h2 id="example">Example</h2>
 
    <a href="photos/image1.jpg" title="Images 1" class="lightbox">ภาพที่1</a> 
    <a href="photos/image5.jpg" title="Images 1" class="lightbox">ภาพที่2</a>
 
</body>
</html>

ข้อมูลเพิ่มเติม : http://leandrovieira.com/projects/jquery/lightbox/

หวังว่าจะเป็นประโยชน์แก่ท่านนะครับ ติดตรงไหน หรือ ทำแล้วมันไม่ขึ้น คอมเม้นท์ถามไว้นะครับ

class jQuery lightbox Resource Download
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ