หมวดหมู่: jQuery

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