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/
หวังว่าจะเป็นประโยชน์แก่ท่านนะครับ ติดตรงไหน หรือ ทำแล้วมันไม่ขึ้น คอมเม้นท์ถามไว้นะครับ