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

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

by gigkokman

ช่วงนี้เป็นช่วงศึกษา 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 มาก่อนนะครับ ^^

You may also like