將所選狀態添加到縮略圖庫

Question

我被要求創建一個縮略圖庫，在點擊時更改主圖像。

我發現這個在線

jsfiddle.net/jfriend00/frXyP/

不過，我想選擇的狀態添加到縮略圖，讓用戶知道他們正在查看其縮略圖（縮略圖和主圖像不會相同），當他們點擊另一個縮略圖時，所選狀態將從前一個縮略圖移到新縮略圖。

感謝大家提前幫助。

乾杯

卡梅倫

Answer 1

在CSS文件中創建一個類的toogle其縮略圖的點擊。像這樣：

// precache all images so they will load on demand 
var imgs = []; 
$('a.thumb').each(function() { 
    var img = new Image(); 
    img.src = this.href; 
    imgs.push(img); 
}).click(function() { 
    $('a.thumb').removeClass("thumb-active"); // removing the class of all objects 
    $(this).addClass("thumb-active"); // Adding the for the active object 
    var oldImg = $("#fadeContainer img"); 

    var img = new Image(); 
    img.src = this.href; 
    var newImg = $(img).hide(); 
    $("#fadeContainer").append(img); 
    oldImg.stop(true).fadeOut(500, function() { 
     $(this).remove(); 
    }); 
    newImg.fadeIn(500); 
    return false; 

}）;

在你的CSS文件，編輯樣式：

.thumb-active{ }