Я пытаюсь создать простую «галерею изображений», где у меня есть одна большая фотография и несколько миниатюр. При нажатии на миниатюру большое изображение должно исчезнуть, а затем исчезнуть в новом изображении. Моя проблема в том, что когда я нажимаю на миниатюру, которая представляет текущее «большое изображение», большое изображение исчезает, и большое изображение не отображается. Поэтому я хочу отключить миниатюру, когда она нажата, и ее большое изображение загружено. Любые предложения о том, как это сделать, будут с благодарностью. Мой текущий код выглядит так:
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