แกลเลอร์รี่รูปภาพง่ายๆโดยใช้เจคิวรี่ โดยกดเปลี่ยนภาพแล้วมันจะ swap ภาพไปอีกภาพโดยมีเฟตอิน แฟตเอ้า สำหรับแสดงสินค้าแบบง่ายๆ มีการแคชภาพไว้ล่วงหน้า เวลาเปลี่ยนภาพจะได้รวดเร็ว
ตกแต่งอัลบัมของเราซักเล็กน้อยก่อน
1 2 3 4 5 6 7 8 9 10 11 12 13 | #imgPreview { height : 481px ; width : 431px ; } .thumbs li { float : left ; height : 60px ; margin : 18px 9px ; width : 74px ; } .thumbs li img.active { border : #c00000 sold thin ; } |
- ใส่ภาพโดยภาพในทัมเนลจะตั้งชื่อให้เหมือนกับภาพใหญ่ เก็บไว้ที่เดียวกัน ต่างกันแค่ ภาพตัวอย่างจะต่อด้วย -thumb เพื่อความสะดวกในการดูแล
- class=”active” จะตรงกับภาพปัจจุบันเที่แสดงในไอดี imgPreview จะไว้เขียนตกแต่งเพิ่มเติมให้ผู้ใช้ทราบว่ากำลัง show ภาพตัวไหนอยู่
- ถ้าเปลี่ยนภาพแล้วกระตุกเพราะหน้าเพจขยับให้ใส่ วัตถุที่มีความยาว หรือความกว้างเท่ากับภาพในแนวที่เปลี่ยนไป จะได้ถีบไว้เวลาเปลี่ยนภาพ เช่น
1
<
hr
width
=
"431"
>
1 2 3 4 5 6 7 8 9 10 | < img id = "imgPreview" src = "assets/products/1-big.jpg" > < ul class = "thumbs" > < li >< img class = "active" src = "assets/products/1.jpg" ></ li > < li >< img src = "assets/products/2-thumb.jpg" ></ li > < li >< img src = "assets/products/3-thumb.jpg" ></ li > < li >< img src = "assets/products/4-thumb.jpg" ></ li > < li >< img src = "assets/products/5-thumb.jpg" ></ li > < li >< img src = "assets/products/6-thumb.jpg" ></ li > < li >< img src = "assets/products/7-thumb.jpg" ></ li > </ ul > |
effect จะตั้งไว้ที่ 300 มิลลิวินาที ถ้าต้องการให้แสดงเร็วช้ากว่านี้ทดลองเปลี่ยนดูครับ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | $( function () { /* preload images cache */ var images = new Array() $( '.thumbs li img' ).each( function (index, value) { console.log(index+ ' ' +$( this ).attr( 'src' )); src = $( this ).attr( 'src' ).split( '.jpg' ); src = src[0]+ '-big.jpg' ; images[index] = new Image() images[index].src = src; }); $( '.thumbs li img' ).click( function () { thumb = $( this ); if (thumb.hasClass( 'active' )) { return true ; } $( '.thumbs li img' ).removeClass( 'active' ); thumb.addClass( 'active' ); /* บรรทัดนี้ทำให้เปลี่ยนรูปไปใช้อีกไฟล์ */ src = thumb.attr( 'src' ).replace( '-thumb.' , '.' ); $( '#imgPreview' ).fadeOut(300, function (){ $( this ).attr( 'src' , src).bind( 'onreadystatechange load' , function () { if ( this .complete) { $( this ).fadeIn(300); } }); }); }); }); |
- ถ้าใช้ javasript อ่าน ปรีโหลดรูปภาพ