jQuery Plugin: bxGallery เพิ่มลูกเล่นในการแสดงรูปภาพบนเว็บ

ช่วงนี้เป็นช่วงศึกษา jQuery ก็เลยมี plugin มาแนะนำเรื่อยๆ ครับ วันนี้เป็น bxGallery ซึ่งเป็น plugin เกี่ยวกับการแสดงรูปภาพ โดยจะมีการแสดงภาพเต็มภาพนึง แล้วจะมีรูปเล็กๆ (thumb) ให้เรากดดูอีก ผมดูแล้วเป็น plugin ที่ใช้งานง่ายๆ ครับ

วิธีการใช้เราก็จะกำหนด container ไว้ก่อน

<div id="slider-container"></div>

จากนั้นก็กำหนดรูปที่เราต้องการแสดงไว้ในแท็ก ul แล้วเอาไปใส่ไว้ใน container ที่เราสร้างไว้ข้างบน

<div id="slider-container">
<ul id="image-slider">
	<li><img src="images/other1.jpg" title="pic 1" /></li>
	<li><img src="images/other2.jpg" title="pic 2" /></li>
	<li><img src="images/other3.jpg" title="pic 3" /></li>
	<li><img src="images/other4.jpg" title="pic 4" /></li>
</ul>
</div>

ถ้าเพื่อนๆ ไม่อยากให้แสดง caption ก็เปลี่ยนจาก title เป็น alt แทนนะครับ ผมลองทดลองดูแล้วดูเหมือนว่า bxGallery จะนำเอา title ไปทำเป็น caption ครับ

หลังจากเตรียม html เสร็จแล้วก็มาถึงส่วนของ javascript ครับ

<script type="text/javascript">
$(function(){
	$('#image-slider').bxGallery({
		maxwidth: '',              // if set, the main image will be no wider than specified value (pixels)
		maxheight: '',             // if set, the main image will be no taller than specified value (in pixels)
		thumbwidth: 200,           // thumbnail width (in pixels)
		thumbcrop: false,          // if true, thumbnails will be a perfect square and some of the image will be cropped
		croppercent: .35,          // if thumbcrop: true, the thumbnail will be scaled to this
								   // percentage, then cropped to a square
		thumbplacement: 'bottom',  // placement of thumbnails (top, bottom, left, right)
		thumbcontainer: '',        // width of the thumbnail container div (in pixels)
		opacity: .7,               // opacity level of thumbnails
		load_text: '',             // if set, text will display while images are loading
		load_image: 'http://i302.photobucket.com/albums/nn92/wandoledzep/spinner.gif',
		                           // image to display while images are loading
		wrapperclass: 'slider-container'      // classname for outer wrapping div
	});
});
</script>

ก่อนที่จะลองรันโค้ดดูอย่างลืมไปดาวน์โหลดเอา bxGallery มาก่อนนะครับ ^^