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 จัดให้พอดีครับไม่ยาก ลองดูนะครับ