Basic image gallery

แกลเลอร์รี่รูปภาพง่ายๆโดยใช้เจคิวรี่ โดยกดเปลี่ยนภาพแล้วมันจะ 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;
}

1. ใส่ภาพโดยภาพในทัมเนลจะตั้งชื่อให้เหมือนกับภาพใหญ่ เก็บไว้ที่เดียวกัน ต่างกันแค่ ภาพตัวอย่างจะต่อด้วย -thumb เพื่อความสะดวกในการดูแล
2. class=”active” จะตรงกับภาพปัจจุบันเที่แสดงในไอดี imgPreview จะไว้เขียนตกแต่งเพิ่มเติมให้ผู้ใช้ทราบว่ากำลัง show ภาพตัวไหนอยู่
3. ถ้าเปลี่ยนภาพแล้วกระตุกเพราะหน้าเพจขยับให้ใส่ วัตถุที่มีความยาว หรือความกว้างเท่ากับภาพในแนวที่เปลี่ยนไป จะได้ถีบไว้เวลาเปลี่ยนภาพ เช่น

   <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 อ่าน ปรีโหลดรูปภาพ