Category Archives: jQuery

Prettyphoto custom theme


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

jQuery Ajax Debugging


ข้อเสียอย่างหนึ่งเวลาใช้ Ajax คือ เวลามี error อะไร user จะไม่ทราบอะไรเลย เพราะว่าเป็นการโหลดแบบเบื้องหลัง บางทีโหลดเกือบจะเสร็จแล้ว แต่เห็นหน้านิ่งๆ เลย refresh ใหม่ซะเลย ความจริง jQuery มี event onErrors ไว้สำหรับจัดการเวลาใช้ Ajax แล้วมีปัญหาอยู่แล้ว แต่การที่จะต้องมาเขียนกำหนดให้ทุกตัวที่เรียกใช้ Ajax ก็ไม่สดวกเลย จึงมี $.ajaxSetup ไว้ให้สามารถกำหนดคุณสมบัติที่เป็นส่วนกลางให้คำสั่ง Ajax ต่างๆ ทั้ง $.Ajax, $.get, $.json, $.post ใช้ร่วมกัน แค่ประกาศใช้ $.ajaxSetup เอาไว้ล่วงหน้า

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery.ajaxSetup</title>
</head>

<body>
<script src="assets/jQuery/jquery.min.js"></script> 
<script>
$.ajaxSetup({
	"cache": false,
	"error": function(jqXHR, exception)
	{
		if(jqXHR.status === 0)
		{
			alert('Not connect.\n Verify Network.');
		}
		else if(jqXHR.status == 404)
		{
			alert('Requested page not found. [404]');
		}
		else if(jqXHR.status == 500)
		{
			alert('Internal Server Error [500].');
		}
		else if(exception === 'parsererror')
		{
			alert('Requested JSON parse failed.');
		}
		else if(exception === 'timeout')
		{
			alert('Time out error.');
		}
		else if(exception === 'abort')
		{
			alert('Ajax request aborted.');
		}
		else
		{
			alert('Uncaught Error.\n' + jqXHR.responseText);
		}
	},
	"scriptCharset": "utf-8",
	"timeout": 60000
});

$.post('nofile.php', function(data){
	alert(data);
});
</script>
</body>
</html>

เรื่องที่เกี่ยวข้อง

%d bloggers like this: