08 | jQuery Lightbox plugin

November 2008 | By admin | jQuery | Tags : ,

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/

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

บทความน่าสนใจ

  1. jQuery – Farbtastic plugin
  2. jQuery – prettyPhoto a jQuery lightbox clone
  3. jQuery – Masked Input Plugin
  4. jQuery – fancy zoom plugin
  5. jQuery – Tabs plugin
Tags: ,

มี 6 ความเห็น ในบทความเรื่อง “jQuery Lightbox plugin”

  1. fishano says:
    18/07/2009 at 02:48

    สุดยอดมากขอบคุณครับ

  2. Tom says:
    14/09/2009 at 15:46

    ขอคำแนะนำด้วย เป็นมือใหม่ครับ ต้องการใช้ jQuery Lightbox plugin ใน wordpress ต้องทำอย่างไรบ้าง step by step ได้มั๊ย
    ขอบคุณ

  3. platoosom says:
    14/09/2009 at 16:03

    ถ้าเป็น wordpress มีเป็นปลั๊กอินของเวิร์ดเพรสเลยครับ เข้าไปในแอดมิน แล้วไปที่เมนู plugins > add new แล้วป้อนคำว่า lightbox เ่จอแล้วก็ติดตั้งเลย แค่นั้นครับผม

  4. kai says:
    28/01/2010 at 13:17

    เป็นบทความที่ดีมากเลยค่ะ
    ลองทำตามแล้วได้เลย  แม้จะไม่มีพื้นโค้ดพวกจาวาสคริปมาก่อน^ ^
     
    แต่ติดอยู่นิดนึงอ่ะจ้ะ
    เราอยากทำเหมือนในหน้าตย.ในเวป  http://leandrovieira.com/projects/jquery/lightbox/
    แต่เราไม่รู้ว่าจะเรียกฟังก์ชั่นให้มัยทำงานยังไงอ่ะค่ะ
    ฟังก์ชั่นนี้

    $(function() {
	$('#gallery a').lightBox({fixedNavigation:true});
});

    ถ้าเทียบกับโค้ดที่คุณจขบ.ลงไว้  ต้องไปแก้ตรงไหนอ่ะคะ?
    สุดท้าย ขอขอบคุณจขบ.มากๆค่ะ ที่เผยแพร่บทความดีดีให้ได้ลองเล่นกัน ^ ^
    เพราะถ้าให้ไปงมเอง  ก็ลำบากเหมือนกันค่ะ (สำหรับคนที่ไม่มีพื้นโค้ดมาก่อน เหะๆ)

  5. platoosom says:
    28/01/2010 at 14:06
     
<script type="text/javascript">
 
     $(document).ready(function(){
         $(".lightbox").lightBox({fixedNavigation:true});
     })
</script>
  6. kai says:
    28/01/2010 at 22:10

    ขอบคุณนะคะ ^ ^
    ปุ่มขึ้นสวยงามแล้ววว

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

ชื่อ *
Email *
Website
ความคิดเห็น