21 | jQuery – prettyPhoto a jQuery lightbox clone

February 2009 | By platoosom | jQuery | Tags :

นี่ก็เป็นปลั๊กอินของ 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/

บทความน่าสนใจ

  1. คำสั่ง clone() ของ jquery
  2. jQuery Lightbox plugin
  3. อ่าว … กูเกิลมันเก็บ theme ของ jQuery UI ไว้ด้วยนี่นา
  4. jQuery .each เขาใช้กันยังไง
  5. jQuery – Farbtastic plugin
Tags:

มี 16 ความเห็น ในบทความเรื่อง “jQuery – prettyPhoto a jQuery lightbox clone”

  1. art says:
    28/05/2009 at 09:32

    ไม่สำเร็จครับ
    ทำเหมือน ทุกอย่าง ทำไมหว่าครับ

  2. platoosom says:
    28/05/2009 at 09:39

    หลังจากดาวน์โหลดโค้ดมา ในโฟลเดอร์มันจะมีตัวอย่างการใช้งานอยู่ครับ ลองศึกษาจากตัวนั้นอีกทาง แล้วก็ดูว่าเราทำผิดตรงไหนครับ

  3. art says:
    28/05/2009 at 09:57

    แก้ได้แล้วครับบ แหะๆ ขอบคุณครับ บทความดีมากครับ
    ติดตามผลงานอยู่นะครับ สู้ๆๆ

  4. platoosom says:
    28/05/2009 at 17:02

    ครับผม ว่าแต่แก้ยังไงเหรอ ถึงทำได้

  5. art says:
    16/06/2009 at 10:25

    สวัสดีครับ
    พอดีไม่ได้มาอ่านครับก็เลยเพิ่งเห็นว่าท่านเจ้าของบ้านมาโพสไว้

    ก็คือผม ไม่ได้โหลด jquery.js มาใส่
    โค้ดก็เลยไม่ทำงานหน่ะครับ แหะๆ พลาดเองแหละครับ

    ตอนนี้ก็มาอ่าน captcha อยู่ครับ
    ผมไม่เก่งโปรแกรมก็เลยยัง งงๆ ต้องลองทดสอบเยอะๆก่อน
    ไว้ค่อยมารบกวนใหม่ครับ ขอบคุณครับ

  6. platoosom says:
    16/06/2009 at 11:36

    ด้วยความยินดีครับ

  7. fishano says:
    18/07/2009 at 04:20

    ขอบ คุณมาก

    ต้องไปเอาไฟล์

    jquery.js มาใส่ด้วยน่ะ งั้นไม่ขึ้น

  8. platoosom says:
    18/07/2009 at 08:04

    ถูกต้องแล้วครับ พวก jQuery plugin นี่ ไฟล์ jquery จะไม่ถูกผนวกรวมเข้าไปด้วย ถ้าหากว่าในโฟลเดอร์ที่ให้ดาวน์โหลดไม่มีให้มา ก็ต้องไปดาวน์โหลดมาใส่เองที่ http://www.jquery.com หรือจะใช้ CDN ของกูเกิล ก็ได้

  9. iamohmm says:
    22/07/2009 at 19:16

    เว็บ ตัวดาวโหลดเข้าไม่ได้แล้วครับผม

  10. platoosom says:
    22/07/2009 at 21:23

    ผมลองโหลดดูยังได้นะครับ

  11. boy says:
    28/07/2009 at 21:02

    ถ้าเอาไปใช่ที่เว็บเรา

    จะมีลิขสิทธิ์ไรรเปล่าครับ

    อ่านไม่เข้าใจ

  12. platoosom says:
    29/07/2009 at 01:43

    ฟรีครับ ไม่มีปัญหาเรื่องลิขสิทธิ์ เท่าที่ผมเจอมา jquery plugin ทุกตัว ฟรีหมด

  13. SG says:
    21/08/2009 at 23:15

    เราสามารถ กำหนดความกว้างของกรอบได้ไหมคะ

  14. platoosom says:
    22/08/2009 at 05:42

    ถ้าเราต้องการกำหนดความกว้าง ความสูงของบ้อกทำได้ครับ โดยส่งพารามิเตอร์ width height ให้มันด้วย อย่างนี้

    <a href=”foodinc_h.480.mov?width=480&height=260” rel=”prettyPhoto[movies]” title=”Food, Inc.” rel=”nofollow”><img src=”images/thumbnails/quicktime-logo.gif” width=”60″ alt=”Food, Inc.” /></a>

    ปลั๊กอินตัวนี้ไม่เพียงแสดงภาพได้เท่านั้น แต่แสดงคอนเท้นได้แทบทุกอย่าง ทั้ง external site , video , image ,flash

    รายละเอียดทั้งหมดอยู่ที่นี่ครับ
    http://www.no-margin-for-errors.com/projects/prettyPhoto-jquery-lightbox-clone/

  15. sitti says:
    27/08/2009 at 09:51

    บทความนี้สุดยอดมากๆครับ ผมชอบสคริปต์เกี่ยวกับรูปภาพอยู่ด้วย โดนสุดๆ

    ทดลองทำตามแล้ว (ทุกบทความที่อ่านมา ทำตามแล้วได้ผลครับ เข้าใจง่าย หุหุหุ ขนาดผมไม่รู้ว่าไอ้ jQuery มันคืออะไร ยังทำตามได้เลยครับพี่น้อง)

    ติดตามผลงานอย่างใกล้ชิดนะครับ

  16. Ekapop says:
    09/02/2010 at 00:02

    น่าใช้มากเลยครับ เดี๋ยวว่างๆจะลองโหลดมาเล่นดู :)

แสดงความเห็น

ชื่อ *
Email *
Website
ความคิดเห็น