jQuery – prettyPhoto a jQuery lightbox clone
นี่ก็เป็นปลั๊กอินของ jquery อีกตัวหนึ่งที่ใช้สำหรับแสดงรูปภาพ ที่มากความสามารถและมีการพัฒนาอย่างต่อเนื่อง มีระบบธีมให้เลือกใช้ด้วย
Dark square theme
light rounded theme
light square theme
dark rounded theme
วิธีการใช้งาน
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/
บทความน่าสนใจ
ผู้เขียน: วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย
เว็บไซต์ :http://www.select2web.com
งานเล็กๆก็ยิ่งใหญ่ได้ ถ้าอยู่ในที่ๆเหมาะสม
ไม่สำเร็จครับ
ทำเหมือน ทุกอย่าง ทำไมหว่าครับ
หลังจากดาวน์โหลดโค้ดมา ในโฟลเดอร์มันจะมีตัวอย่างการใช้งานอยู่ครับ ลองศึกษาจากตัวนั้นอีกทาง แล้วก็ดูว่าเราทำผิดตรงไหนครับ
แก้ได้แล้วครับบ แหะๆ ขอบคุณครับ บทความดีมากครับ
ติดตามผลงานอยู่นะครับ สู้ๆๆ
ครับผม ว่าแต่แก้ยังไงเหรอ ถึงทำได้
สวัสดีครับ
พอดีไม่ได้มาอ่านครับก็เลยเพิ่งเห็นว่าท่านเจ้าของบ้านมาโพสไว้
ก็คือผม ไม่ได้โหลด jquery.js มาใส่
โค้ดก็เลยไม่ทำงานหน่ะครับ แหะๆ พลาดเองแหละครับ
ตอนนี้ก็มาอ่าน captcha อยู่ครับ
ผมไม่เก่งโปรแกรมก็เลยยัง งงๆ ต้องลองทดสอบเยอะๆก่อน
ไว้ค่อยมารบกวนใหม่ครับ ขอบคุณครับ
ด้วยความยินดีครับ
ขอบ คุณมาก
ต้องไปเอาไฟล์
jquery.js มาใส่ด้วยน่ะ งั้นไม่ขึ้น
ถูกต้องแล้วครับ พวก jQuery plugin นี่ ไฟล์ jquery จะไม่ถูกผนวกรวมเข้าไปด้วย ถ้าหากว่าในโฟลเดอร์ที่ให้ดาวน์โหลดไม่มีให้มา ก็ต้องไปดาวน์โหลดมาใส่เองที่ http://www.jquery.com หรือจะใช้ CDN ของกูเกิล ก็ได้
เว็บ ตัวดาวโหลดเข้าไม่ได้แล้วครับผม
ผมลองโหลดดูยังได้นะครับ
ถ้าเอาไปใช่ที่เว็บเรา
จะมีลิขสิทธิ์ไรรเปล่าครับ
อ่านไม่เข้าใจ
ฟรีครับ ไม่มีปัญหาเรื่องลิขสิทธิ์ เท่าที่ผมเจอมา jquery plugin ทุกตัว ฟรีหมด
เราสามารถ กำหนดความกว้างของกรอบได้ไหมคะ
ถ้าเราต้องการกำหนดความกว้าง ความสูงของบ้อกทำได้ครับ โดยส่งพารามิเตอร์ 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/
บทความนี้สุดยอดมากๆครับ ผมชอบสคริปต์เกี่ยวกับรูปภาพอยู่ด้วย โดนสุดๆ
ทดลองทำตามแล้ว (ทุกบทความที่อ่านมา ทำตามแล้วได้ผลครับ เข้าใจง่าย หุหุหุ ขนาดผมไม่รู้ว่าไอ้ jQuery มันคืออะไร ยังทำตามได้เลยครับพี่น้อง)
ติดตามผลงานอย่างใกล้ชิดนะครับ
น่าใช้มากเลยครับ เดี๋ยวว่างๆจะลองโหลดมาเล่นดู :)
มีท่านใดพอทราบวิธีการทำให้ prettyPhoto สามารถเปิดขึ้นมาได้เอง โดยไม่ต้องคลิ๊กมั๊ยคะ อยากทำให้มันขึ้นโชว์ก่อนเข้าหน้าเว็บไซต์หนะค่ะ