圖片庫：點擊時禁用縮略圖

Question

我正在嘗試創建一個簡單的「圖片庫」，其中有一張大照片和幾張縮略圖。點擊縮略圖時，大圖像應淡出，然後淡入新圖像。我的問題是，當我點擊代表當前「大圖像」的縮略圖時，大圖像會消失，並且不會顯示大圖像。因此，我想在點擊後禁用縮略圖，並且已經加載大圖片。任何建議如何做到這一點將不勝感激。我當前的代碼如下所示：

application.js

function addClickHandlers(){ 
    var large_image = document.getElementById("large_image") 
    var thumbnail = $('img.thumbnail') 

    // Adds click handlers to image thumbnails that update the larger image 
    $(thumbnail, this).click(function() { 
    src = this.src.replace("thumb", "large") 
    $(large_image).fadeOut(200, function(){ 
     $(large_image).attr('src', src).bind('readystatechange load', function(){ 
     if (this.complete) $(this).fadeIn(400); 
     }); 
    }); 
    }); 
}; 

$(document).ready(addClickHandlers); 

而我的HTML/HAML

.big_photo 
    = image_tag(@tee.tee_images.first.photo.url(:large), :id => "large_image") 
- tee.tee_images.each do |image| 
    = image_tag(image.photo.url(:thumb), :class => "thumbnail") 

我已經按照這個教程：http://blog.randomutterings.com/articles/2009/02/15/changing-images-with-jquery-and-the-fade-effect

Answer 1

怎麼樣，如果大的圖像檢查匹配拇指？所以更改代碼爲

$(thumbnail, this).click(function() { 
    src = this.src.replace("thumb", "large"); 
    if (src != large_image.src) 
    $(large_image).fadeOut(200, function(){