นี่ก็เป็นปลั๊กอินของ jquery อีกตัวหนึ่งที่ใช้สำหรับแสดงรูปภาพ ที่มากความสามารถและมีการพัฒนาอย่างต่อเนื่อง มีระบบธีมให้เลือกใช้ด้วย

Dark square theme

light rounded theme

light square theme

dark rounded theme

Download – Demo

วิธีการใช้งาน

1.include jquery , css และ pretty photo เข้ามาในส่วน <head>

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
 
<link media="screen" href="css/prettyPhoto.css" type="text/css" charset="utf-8" rel="stylesheet" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

2.โครงสร้าง html

<a title="Description" href="images/fullscreen/1.jpg" rel="prettyPhoto"><img alt="Picture 1 title" src="/images1.jpg" /></a>

จะเห็นว่าจะใช้ลิ้งก์ชี้ไปที่ภาพใหญ่ที่ต้องการแสดง สิ่งที่สำคัญคือ rel="prettyPhoto" เพื่อให้ตัวปลั๊กอินรู้ว่าภาพนี้เราต้องการใช้คุณสมบัติของเขา เข้ามาช่วยแสดงผล และ title="Description" ของแท็ก a นะครับ เพื่อใช้แสดงเป็น title ของบ้อกที่ใช้แสดงภาพ

3.เขียนโค้ด javascript ในส่วน <head>

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
	$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>

โค้ดทั้งหมด เป็นดังนี้ 

<html>
<head>
<title>Pretty-Photo</title>
 
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
 
<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$("a[rel^='prettyPhoto']").prettyPhoto();
	});
</script>
 
</head>
<body>
 
<a href="images/fullscreen/1.jpg" rel="prettyPhoto" title="Description"><img src="/images1.jpg" alt="Picture 1 title" /></a>
<a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="Description"><img src="/images2.jpg" alt="Picture 2 title" /></a>
 
</body>
</html>

จบแล้วครับ การใช้งาน ง่ายๆ แค่นี้เอง ข้อความด้านล่างลงไป ผมจะกล่าวถึงการปรับแต่งครับ

ในกรณีที่คุณต้องการปรับแต่งตัว pretty photo ก็สามารถทำได้โดยการส่ง parameter เข้าไปตอนเรียกใช้ ดังนี้

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
	$("a[rel^='prettyPhoto']").prettyPhoto({
		animationSpeed: 'normal', /* ลักษณะการแสดงแอนิเมชั่น fast/slow/normal */
		padding: 40, /* กำหนดระยะห่างระหว่างรูปภาพกับตัวบ้อก */
		opacity: 0.35, /* กำหนดค่าความโปร่งแสง  0 - 1 */
		showTitle: true, /* กำหนดให้แสดง title หรือไม่ true/false */
		allowresize: true, /* อนุญาติให้ยูสเซ่อร์ย่อหรือขยายหรือไม่ true/false */
		counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
		theme: 'light_rounded' /* ธีม light_rounded / dark_rounded / light_square / dark_square */
	});
});
</script>

ในกรณีที่คุณ เลือกใช้ ธีม dark_rounded หรือ dark_square ให้ใส่คำสั่งนี้เข้าไปในส่วน <head> ด้วย เพื่อแก้ปัญหา IE แสดงภาพที่เป็นนามสกุล .png ไม่ยอมโปร่งแสงให้

<!--[if IE 6]>
	<script src="js/DD_belatedPNG_0.0.7a-min.js"></script>
	<script>
		DD_belatedPNG.fix('.pp_left,.pp_right,a.pp_close,a.pp_arrow_next,a.pp_arrow_previous,.pp_content,.pp_middle');     
	</script>
<![endif]-->

ในกรณีต้องการแสดงรูปภาพในแบบของแกลเลอรี่ ทำได้ดังนี้ rel="prettyPhoto[ gallery-name ]" ในเครื่องหมาย [] ก็เป็นชื่อของ แกลเลอรี่ ซึ่งอยากจะให้เป็นอะไรก็ได้ และใน 1 เพจ ท่านก็สามารถมีแกลเลอรี่ได้หลายตัว

แหล่งศึกษาเพิ่มเติม : http://www.no-margin-for-errors.com/projects/prettyPhoto/

Download Demo gallery jQuery jquery slide lightbox Pretty Photo prettyphoto slide slide show
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ