light box jQuery ก็มีมากมาย แต่ฝ่าย design ดันไปอยากได้แบบที่มันไม่มีซะงัน ไม่อยากเขียนเอง โมมันจากของที่มีอยู่เดิมนี่ละ โหลด Prettyphoto นอกจาก จะเลือกธีมได้แล้วยังปรับแต่งองค์ประกอบได้อีกด้วย โดยระบุใน markup (ส่วนกรอบแสดงผล) และ gallery_markup (ส่วน thumbnail) code ตามนี้เลย
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<!--script src="js/jquery.lint.js"></script-->
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
</head>
<body>
<ul class="gallery clearfix">
<li><a href="images/fullscreen/2.jpg" rel="modal[gallery1]" title="This is the description"><img src="images/thumbnails/t_2.jpg" width="60" height="60" /></a></li>
<li><a href="images/fullscreen/1.JPG?lol=lol" rel="modal[gallery1]" title="You can add caption to pictures. You can add caption to pictures. You can add caption to pictures."><img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" /></a></li>
<li><a href="images/fullscreen/2.jpg" rel="modal[gallery1]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Nice building" /></a></li>
<li><a href="images/fullscreen/3.jpg" rel="modal[gallery1]"><img src="images/thumbnails/t_3.jpg" width="60" height="60" alt="Fire!" /></a></li>
<li><a href="images/fullscreen/4.jpg" rel="modal[gallery1]"><img src="images/thumbnails/t_4.jpg" width="60" height="60" alt="Rock climbing" /></a></li>
<li><a href="images/fullscreen/5.jpg" rel="modal[gallery1]"><img src="images/thumbnails/t_5.jpg" width="60" height="60" alt="Fly kite, fly!" /></a></li>
<li><a href="images/fullscreen/6.jpg" rel="modal[gallery1]"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="Nice building" /></a></li>
</ul>
<script src="../plus/jQuery/jquery.min.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script>
$(document).ready(function(){
$("a[rel^='modal']").prettyPhoto({
animation_speed:'normal'
,theme:'pp_default'
,slideshow:false
, autoplay_slideshow: false
,markup: '<div class="pp_pic_holder">
<div class="pp_content_container">
<div class="pp_content">
<div class="pp_loaderIcon"></div>
<div class="pp_fade">
<a href="#" class="pp_expand" title="Expand the image">Expand</a>
<div class="pp_hoverContainer">
<a class="pp_next" href="#">next</a>
<a class="pp_previous" href="#">previous</a>
</div>
<div id="pp_full_res"></div>
<div class="pp_details">
<p class="pp_description"></p>
<p class="currentTextHolder">0/0</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pp_overlay"></div>'
,gallery_markup: ''
});
});
</script>
</body>
</html>
ทดลองดูผลงานมันเปิด modal มันขึ้นมา แต่ไม่อยู่ตรงกลางขอบบนมันอยู่ต่ำกว่าเส้นกลาง page ซะอีก เช็คดู css มันแสดงผลแบบนั้นถูกแล้ว แต่เวลาทำงาน มันจะใช้ javascript ปรับตำแหน่งอีกที หาไปหามาเจอสาเหตุว่า ไปปิดส่วนที่แสดง title ในเทมเพลทออก ทำให้จาวาสคริปต์ทำให้ titleHeight มีค่าเป็น NaN แทนที่มันจะส่งค่าความสูงของ block title ทำให้เวลาบวกกับความสูงส่วนอื่นๆ จะได้ค่าที่ได้จะผิด (ถ้าเราตัวแปรคนละประเภทบวกกัน จะได้อะไรแปลกๆเสมอ แทบทุกภาษา)
แก้บ้านๆ โดยไปที่บรรทัด
pp_containerHeight = pp_contentHeight + titleHeight + $pp_pic_holder.find(‘.pp_top’).height() + $pp_pic_holder.find(‘.pp_bottom’).height();
เปลี่ยนเป็น
pp_containerHeight = pp_contentHeight + $pp_pic_holder.find(‘.pp_top’).height() + $pp_pic_holder.find(‘.pp_bottom’).height();
เอา titleHeight ออกไปนั่นละ test อีกทีแสดงผลถูกแล้ว มาอ่านคู่มืออีกที มันมี option show_title ตั้งเป็น false ปิด title ได้น่าจะแก้ตรงจุดมากกว่าแต่ช่างมันเถอะ ที่เหลือก็แก้ css จัดให้พอดีครับไม่ยาก ลองดูนะครับ