Category Archive CSS

Byphunsanit

Basic image gallery

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