ทำภาพซูมด้วย jQuery lightBox
posted on 15 Jan 2009 04:03 by itsheeแนะนำเทคนิคการทำภาพแบบซูมภายในบล็อกครับ ข้อดีของวิธีนี้คือ (1) วางตำแหน่งภาพได้สะดวกไม่เปลืองเนื้อที่สำหรับวางภาพเต็ม (2) คนอ่านก็ไม่ต้องกดเข้าไปดูภาพในหน้าอื่น (3) สามารถดูในหน้าเดิมได้ทันที นอกจากนี้ (4) ลดการโหลดโหดด้วย เพราะภาพใหญ่แต่ละภาพจะโหลดทีหลัง ตัวอย่างของเทคนิคนี้ตามภาพด้านล่างครับ ลองนำภาพเก่าๆ ที่เคยมาลงบล็อกแล้วมาทำเป็นตัวอย่าง
ขั้นตอนการทำเพียงแค่ติดตั้งโค้ดไว้ใน custom code โดยโค้ดทั้งหมดที่นำมาใช้คือ jQuery (เจควีรี) และ ไลต์บ็อกซ์ (lightbox) โดยนำโค้ดด้านล่างไปใส่
<script type="text/javascript" src="http://itshee.com/exteen/jquery.lightbox.js"></script>
<link rel="stylesheet" type="text/css" href="http://itshee.com/exteen/jquery.lightbox.css" media="screen" />
<script type="text/javascript">
$(function() {
$('#gallery a').lightBox();
});
</script>
เพียงแค่นี้ในส่วนของการติดตั้ง หากใครต้องการแก้สีเอง สามารถแก้ในส่วน CSS ได้ ขั้นตอนต่อไปคือการใส่เข้าไปในเอนทรีนั้น อย่างแรกต้องเตรียมภาพไว้สองชุด ชุดแรกคือภาพขนาดย่อ และชุดที่สองเป็นต้นฉบับขนาดเต็ม โดยใส่ภาพขนาดย่อเข้าไปเหมือนใส่ภาพตามปกติ และให้ทำลิงก์ของแต่ละภาพไปที่ภาพขนาดเต็ม เมื่อใส่เสร็จ ก่อนที่จะกด publish
ใส่ </div> ท้ายสุดของส่วนภาพ
พอใส่เสร็จแค่นี้ก็เสร็จขั้นตอนครับ โดยถ้าต้องการใส่คำอธิบายภาพ ก็ใส่ title เข้าไป คราวนี้มาดูตัวอย่างโค้ดทั้งหมดของผมจะได้ว่า
<ul>
<li>
<a href="http://farm2.static.flickr.com/1149/3170446847_456febccec.jpg?v=0" title="มหาวิหารแห่งชาติกรุงวอชิงตัน ดี.ซี. (Washington National Cathedral)"> <img src="http://farm2.static.flickr.com/1149/3170446847_456febccec_t.jpg" />
</a>
</li>
<li>
<a href="http://farm1.static.flickr.com/233/525159117_bd08523441.jpg?v=0" title="ภาพเที่ยวที่แอนเทอโลปแคนยอน">
<img src="http://farm1.static.flickr.com/233/525159117_bd08523441_t.jpg" />
</a>
</li>
<li>
<a href="http://farm1.static.flickr.com/161/402231017_6fdd19fd7f.jpg?v=0" title="ฝนตกที่อุณหภูมิศูนย์องศา ทำให้ฝนกลายมาเป็นน้ำแข็งเมื่อกระทบวัตถุ">
<img src="http://farm1.static.flickr.com/161/402231017_6fdd19fd7f_t.jpg" />
</a>
</li>
<li>
<a href="http://champcpe.exteen.com/images/2009/01/promo_wandek.jpg">
<img src="http://champcpe.exteen.com/images/2009/01/quizboy.gif" />
</a>
</li>
</ul>
</div>
เทคนิคอื่นๆ อาจลองปรับแก้ดูได้ครับ โดยอาจปรับ CSS ตามสีที่ต้องการ หรือว่าปรับชื่อ ตรง id ได้ เพื่อไม่ให้ภาพมันไปลิงก์ข้ามกับ id ตัวอื่น
...เยี่ยมเลยครับ
โอ้วววว ขอบคุณมากคร้าบ
เส้นผมบังภูเขาแท้ๆ
#1 By ::housewife:: on 2009-01-15 05:01