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

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