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

图库：单击时禁用缩略图

1 个答案: