แกลเลอร์รี่รูปภาพง่ายๆโดยใช้เจคิวรี่ โดยกดเปลี่ยนภาพแล้วมันจะ swap ภาพไปอีกภาพโดยมีเฟตอิน แฟตเอ้า สำหรับแสดงสินค้าแบบง่ายๆ มีการแคชภาพไว้ล่วงหน้า เวลาเปลี่ยนภาพจะได้รวดเร็ว
ตกแต่งอัลบัมของเราซักเล็กน้อยก่อน
[code language=”css”]
#imgPreview {
height: 481px;
width: 431px;
}
.thumbs li {
float: left;
height: 60px;
margin: 18px 9px;
width: 74px;
}
.thumbs li img.active {
border:#c00000 sold thin;
}
[/code]
- ใส่ภาพโดยภาพในทัมเนลจะตั้งชื่อให้เหมือนกับภาพใหญ่ เก็บไว้ที่เดียวกัน ต่างกันแค่ ภาพตัวอย่างจะต่อด้วย -thumb เพื่อความสะดวกในการดูแล
- class=”active” จะตรงกับภาพปัจจุบันเที่แสดงในไอดี imgPreview จะไว้เขียนตกแต่งเพิ่มเติมให้ผู้ใช้ทราบว่ากำลัง show ภาพตัวไหนอยู่
- ถ้าเปลี่ยนภาพแล้วกระตุกเพราะหน้าเพจขยับให้ใส่ วัตถุที่มีความยาว หรือความกว้างเท่ากับภาพในแนวที่เปลี่ยนไป จะได้ถีบไว้เวลาเปลี่ยนภาพ เช่น [code language=”html”]<hr width="431">[/code]
[code language=”html”]
<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>
[/code]
effect จะตั้งไว้ที่ 300 มิลลิวินาที ถ้าต้องการให้แสดงเร็วช้ากว่านี้ทดลองเปลี่ยนดูครับ
[code language=”javascript”]
$(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);
}
});
});
});
});
[/code]
- ถ้าใช้ javasript อ่าน ปรีโหลดรูปภาพ