이미지 갤러리 : 클릭하면 축소 이미지가 표시되지 않습니다.

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); 

내가이 튜토리얼을 따라 한

.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") 

내 HTML/HAML : 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(){