图片库：单击时禁用缩略图

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(){