วันนี้ไปเก็บตกวิธีการขยายรูป Thumbnail โดยไม่ต้องเปิดหน้าต่างใหม่ในบล็อก มาฝากครับ
เทคนิคนี้ได้มาจากกระทู้แนะนำของห้องกล้องในพันทิป แต่จริงๆ เค้าแนะนำมาเพื่อใช้กับ Bloggang แต่ผมลองมาเอาใช้กับ WordPress ดูก็ได้ผลเป็นที่น่าพอใจมากครับ

โดยสคริปตัวนี้ ทางเจ้าของกระทู้กับโปรแกรมเมอร์คู่ใจ(พี่เค้าว่าอย่างนั้น^^) เขียนขึ้นมาครับ โดยใช้ได้กับ Browsers เกือบทั้งหมด ทั้ง IE, Firefox, Safari หรือแม้แต่ iPhone ครับ (ผมทดลองใช้กับ Browsers ที่ผมใช้ซึ่งก็คือ Flock ก็ยังทำงานได้ดีครับ)

วิธีการที่ผมเอามาใช้กับ WordPress ก็คือ แทรกสคริปข้างล่างนี้เข้าไปใน Text Widget ของเราแค่นั้นเองครับ

<script type=”text/javascript” src=”http://api.apricotion.com/jquery/core/jquery_v1.2.3.js”></script>
<link rel=”stylesheet” href=”http://api.apricotion.com/highslide/css/style.css” type=”text/css” />
<script type=”text/javascript” src=”http://api.apricotion.com/highslide/highslide.js”></script>
<script type=”text/javascript” src=”http://api.apricotion.com/highslide/apricot-controller.js”></script>

เวลาเราใส่รูปเข้าไปก็ใส่ตามปรกติ และก็ทำ Link ส่งไปที่รูปนั้นด้วยนะครับ เพราะว่าการส่ง Link ไปที่รูปภาพจะทำให้รูปนั้นขยายขนาดขึ้นมาครับ

ทีนี้เรามาทดสอบกันสักหน่อยครับ

————————————————————————————–

เสร็จแล้วครับ ลองคลิกที่ภาพ เพื่อดูขนาดขยายของภาพนะครับ วิธีที่ผมใช้จะออกแนวบ้านๆ หน่อย ถ้าใครเอาไปลองใช้แล้วเจอวิธีในการใช้กับ WordPress ที่ดีกว่านี้ บอกด้วยนะครับ ^^

ขอบคุณ:

• คุณAngos จากห้องกล้อง Pantip.com สำหรับสคริปนี้ ที่นำมาให้ใช้กัน
• ถ้าอยากอ่านข้อมูลเพิ่มเติมจากกระทู้ อ่านได้ ที่นี่ครับ แก้ไขกระทู้หายไปแล้วครับ

19 Responses to “เทคนิคแทรกสคริปขยายรูป Thumbnail”