เรื่อง lightbox ภายใต้ loadContent แล้วไม่ทำงานครับ
คืดผมใช้ฟังก์ชัน loadContent() ในการ refresh ในแต่ละ content แต่มีในส่วนที่มีการใช้แสดงรูปภาพด้วย lightbox แล้วมันไม่ยอมแสดงมันจะเด้งไปแสดงอีกหน้าเลยเหมือนกับว่า lightbox ไม่ทำงานนะครับ
index.php
<div class="main" id="content_main"></div>
<script>loadContent('content_main','picschow.php');</script>
picshow.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style/lightbox.css" type="text/css" media="screen">
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/effects.js" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
</head>
<body>
<a href="images/attachments/ambulance_car2.jpg" rel="lightbox[shady]"><img src="images/doctor/dr1.gif" width="74" height="90" /></a>
<a href="images/attachments/package-01-01-52.jpg" rel="lightbox[shady]"><img src="images/doctor/dr2.gif" width="74" height="90" /></a>
<a href="images/attachments/sriput_building.gif" rel="lightbox[shady]"><img src="images/doctor/dr1.gif" width="74" height="90" /></a>
</body>
</html>
index.php
<div class="main" id="content_main"></div>
<script>loadContent('content_main','picschow.php');</script>
picshow.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="style/lightbox.css" type="text/css" media="screen">
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/effects.js" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
</head>
<body>
<a href="images/attachments/ambulance_car2.jpg" rel="lightbox[shady]"><img src="images/doctor/dr1.gif" width="74" height="90" /></a>
<a href="images/attachments/package-01-01-52.jpg" rel="lightbox[shady]"><img src="images/doctor/dr2.gif" width="74" height="90" /></a>
<a href="images/attachments/sriput_building.gif" rel="lightbox[shady]"><img src="images/doctor/dr1.gif" width="74" height="90" /></a>
</body>
</html>
หาอ่านรายละเอียดอื่นๆเพิ่ามเติมได้บนเว็บนะครับมีเขียนไว้ ที่หมวด Ajax
แต่เมื่อผมลองเปลี่ยนไฟล์ test.php เป็นแบบนี้
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>jQuery Lightbox v0.5 | Test Page</title>
<link rel="stylesheet" href="style/lightbox.css" type="text/css" media="screen" />
<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script>
<script src="jquery.lightbox.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$(".lightbox").lightbox();
});
</script>
<style type="text/css">
body{ color: #333; font: 13px 'Lucida Grande', Verdana, sans-serif; }
</style>
</head>
<body>
<h1><a href="http://warren.mesozen.com">jQuery Lightbox <em>v0.5</em></a></h1>
<p>Modified work by <a href="http://warren.mesozen.com/">Warren Krewenki</a></p>
<p>Originally written by <a href="http://www.huddletogether.com">Lokesh Dhakar</a></p>
<h2>Example 1: Single Image</h2>
<a href="images/image-0.jpg" class="lightbox" title="Cape Breton Island"><img src="images/thumb-0.jpg" width="100" height="40" alt="" /></a>
<h2>Example Two: Series</h2>
<a href="images/image-1.jpg" class="lightbox" rel="flowers" title="jQuery Lightbox Sample Image"><img src="images/thumb-1.jpg" width="100" height="40" alt="" /></a>
<a href="images/image-2.jpg" class="lightbox" rel="flowers" title="Photo by Steven Pinker"><img src="images/thumb-2.jpg" width="100" height="40" alt="" /></a>
<a href="images/image-3.jpg" class="lightbox" rel="flowers" title="Photo by Uwe Hermann"><img src="images/thumb-3.jpg" width="100" height="40" alt="" /></a>
</body>
</html>
มันไม่สามารถทำงานได้ตามที่ต้องการนะครับ(แสดงแบบ lightbox)
ไม่ทราบว่าผมทำอะไรผิดตรงไหนเหรอครับ
ขอขอบคุณสำหรับทุกคำตอบที่บอกมาล่วงหน้านะครับ
คำแนะนำที่พอเป็นไปได้ก็คือ
1.ทดสอบการเรียกแบบปกติ (HTML) เพื่อดูว่า มันสามารถทำงานได้หรือไม่ ซึ่งมันควรจะต้องทำงานได้นะครับ
2.ถ้าจะเรียกหน้าเว็บที่ทดสอบ ด้วย Ajax ให้ทำตามบทความอย่างเคร่งครัด ย้ำว่า เคร่งครัด นะครับการลืมอะไรแม้แต่เพียงเล็กน้อยอาจทำให้มันไม่ทำงานตามที่คาดหวัง
3.ถ้ายังไม่ประสบความสำเร็จ อาจต้องใช้ เทคนิคที่สูงขึ้น หรือ อาจต้องลองเปลี่ยนไปใช้วิธีอื่น เนื่องจาก LightBox นั้นทำงานด้วย Javascript ซึ่งคำสั่งบางอย่างอาจไม่สามารถทำงานได้เลยในหน้าที่ถูก Ajax เรียก (อยากรู้ว่ามีอะไรบ้างให้ลองหาอ่านบทความดูครับ) และมันอาจไม่ได้ถูกออกแบบมาเพื่องานลักษณะนี้ก็ได้ครับ