ตัวอย่างวิธีใช้ lightbox jQuery Script ทำ photo gallery

lightbox jquery

lightbox jquery

ถึงวันนี้ทุกคนคงร้จัก jQuery กันหมดแล้ว ขอข้ามส่วนของ Script ชื่อดังนี้ไปก่อนเลยแล้วกัน
มาเริ่มกันที่ Lightbox คืออะไร เนื่องจาก jQuery เป็น Ajax ที่มีความสามารถมากมายรวมถึง
หน้าตาของผลงานที่ออกมาดูสวยงาม จึงมีคนนำมาทำเป็น Script พร้อมใช้เป็นจำนวนมาก และ
หนึ่งในนั้นก็คือ Lightbox ทีมีคุณสมบัติของการทำเป็น Popup เพื่อแสดงรูปภาพอย่างสวยงาม
Script แบบนี้ถูกเรียกว่าเป็น Framework นะครับถูกสร้างขึ้นมาเพื่อให้เราทำงานได้ง่ายและ
สะดวกมากยิ่งขึ้น แต่นอกจากเจ้า jQuery แล้วยังมีตัวอื่นๆอีกมากมายเช่น prototype

ข้อดีที่พิเศษหน่อยของ Lightbox ก็คือถึงแม้จะเป็น popup แต่ก็ไม่่มีปัญหากับทาง Browser
และเป็นที่นิยมค่อนข้างมาก ลองเข้าไปดูตัวอย่างก่อนได้นะครับที่  ptechcom.net

เพื่อไม่ให้เป็นการเสียเวลามาดูวิธีการนำไปใช้แบบง่ายๆกันเลย ผมจะไม่กล่าวไปถึงโครงสร้างนะครับ
เพราะงานนี้ต้องการให้ทุกคนเอาไปใช้งานได้จริงเท่านั้น ไม่ได้ต้องการให้ขั้นเทพถึงขนาดไล่เขียนเอง
ใหม่ตั้งแต่ต้น ถ้าอย่างนั้นเชื่อว่าคงไม่มาอ่านตรงนี้แล้ว 555
เริ่มต้นเลยต้องไป Download ไฟล์ที่จำเป็นต้องใช้มาก่อนนะครับ นั้นก็คือไฟล์  jQuery และไฟล์ CSS นั้นเอง
Download Script  File

จากนั้นก็ไปสร้าง Folder สำหรับจัดเก็บไฟล์ใน Host หรือ www ได้เลยครับ เข้าไปที่
C:AppServwwwสร้างโฟลเดอร์
แล้วแตกไฟล์ที่ผม zip เอาไว้วางไว้ตรงนี้คุณจะได้ Folder ทั้งหมด 3 Folder คือ css,js,images พร้อมกับไฟล์ชื่อ
photo.php ซึ่งผมจะอธิบายจากไฟล์นี้เลยนะครับ

อันดับแรกที่คุณต้องทำก็คือ เตรียมรูปภาพสำหรับใช้งานครับ ใน Folder images นั้นจะมี Folder อยู่ 2 Folder
ชื่อ photo กับ thumb ให้คุณเอารูปขนาดใหญของคุณมาเก็บไว้ใน Folder ที่ชื่อ photo และให้คุณย่อรูปขนาดเล็ก
ลงไปวางไว้ที่ Folder  thumb แล้วคุณก็เปิด Code ไฟล์ photo.php ขึ้นมา

<htm>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-874″ />
<title>photo gallery</title>
<script type=”text/javascript” src=”js/prototype.js”></script>
<script type=”text/javascript” src=”js/scriptaculous.js?load=effects,builder”></script>
<script type=”text/javascript” src=”js/lightbox.js”></script>
<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />
</head>
<body>
<center>
<a href=”images/photo/image2.jpg” rel=”lightbox[roadtrip]”>
<img src=”images/thumb/thumb-2.jpg”  width=”150″ height=”100″ /></a>
<a href=”images/photo/image3.jpg” rel=”lightbox[roadtrip]”>
<img src=”images/thumb/thumb-3.jpg”  width=”150″ height=”100″ /></a>
<a href=”images/photo/image4.jpg” rel=”lightbox[roadtrip]”>
<img src=”images/thumb/thumb-4.jpg”  width=”150″ height=”100″ /></a>
</center>
</body>
</html>

มาดู Code กันครับ เริ่มจากบรรทัดที่ 5 ผมดึงไฟล์ prototype.js ออกมา แล้วบรรทัดต่อมา
ก็ดึง scriptaculous.js ออกมาอีกและ lightbox.js เป็นอันดับสุดท้าย ส่วนบรรทัดที่จัดการ
กับ Css คือ <link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />
ส่วนที่ดึงไฟล์เข้ามานี่คือ  การดึงเอาความสามารถของ Ajax ที่เค้าพัฒนากันไว้มาทำงานนะครับ

ที่นี้มาดูต่อในส่วนที่เราต้องสร้างเองบ้าง

<a href=”images/photo/image2.jpg” rel=”lightbox[roadtrip]”>
<img src=”images/thumb/thumb-2.jpg”  width=”150″ height=”100″ /></a>

ตรงนี้ เริ่มจากการสร้าง Link ไปที่รูปภาพจริงๆที่อยู่ใน Folder ชื่อ photo แล้วให้ดึง rel=”lightbox[roadtrip]”
เข้ามาใช้งานในการแสดงผลเป็น popup ส่วนบรรทัดต่อมาก็แค่เรียกรูปภาพซึ่งเป็น thumb ขึ้นมาจาก Folder ครับ
แล้วก็กำหนดความกว้าง ความสูงไว้ได้เลย

เท่านี้ก็เป็นอันจบสำหรับส่วนของการนำเอา lightbox ไปใช้งานนะครับ หากอยากวางรูปเพิ่มขึ้นอีกก็แค่ใส่ tag br เพื่อ
ขึ้นบรรทัดใหม่เท่านั้นเอง ผมเขียนเสร็จแล้วแต่เอาวิธีการนำไปใช้มาให้ดูเป็นวิดีโอด้วยแต่มีปัญหาเรื่อง up ไม่ผ่านซะที
เอาเป็นว่าเดี๋ยวอัพผ่านแล้วจะเอามาให้ดูกันย้อนหลังแล้วกันนะครับ

ติดตามวิดีโอต่างๆเพิ่มเติมได้ที่ teerapuchchanel