แกลเลอร์รี่รูปภาพง่าย ๆ โดยใช้เจคิวรี่ โดยกดเปลี่ยนภาพแล้วมันจะ swap ภาพไปอีกภาพโดยมีเฟตอิน แฟตเอ้า สำหรับแสดงสินค้าแบบง่าย ๆ มีการแคชภาพไว้ล่วงหน้า เวลาเปลี่ยนภาพจะได้รวดเร็ว
ตกแต่งอัลบัมของเราซักเล็กน้อยก่อน
#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 ภาพตัวไหนอยู่
- ถ้าเปลี่ยนภาพแล้วกระตุกเพราะหน้าเพจขยับให้ใส่ วัตถุที่มีความยาว หรือความกว้างเท่ากับภาพในแนวที่เปลี่ยนไป จะได้ถีบไว้เวลาเปลี่ยนภาพ เช่น
<hr width="431">
<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 มิลลิวินาที ถ้าต้องการให้แสดงเร็วช้ากว่านี้ทดลองเปลี่ยนดูครับ
$ (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 อ่าน ปรีโหลดรูปภาพ