我正在尝试创建一个简单的“图片库”，其中有一张大照片和几个缩略图。单击缩略图时，大图像应淡出，然后淡入新图像。我的问题是，当我单击代表当前“大图像”的缩略图时，大图像会淡出并且不显示大图像。因此，我想在单击缩略图并且加载大图像后禁用缩略图。任何有关如何执行此操作的建议将不胜感激。我当前的代码如下所示：
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
I'm trying to create a simple "image gallery" where I have one big photo and a couple of thumbnails. When a thumbnail is clicked the big image should fade out and then fade in the new image. My problem is that when I click on the thumbnail that represents the current "big image" the big image fades out and no big image is displayed. I therefore want to disable the thumbnail once it's clicked and it's big image has been loaded. Any suggestions on how to do this would be greatly appreciated. My current code looks like this:
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);
And my 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")
I've followed this tutorial: http://blog.randomutterings.com/articles/2009/02/15/changing-images-with-jquery-and-the-fade-effect
发布评论
评论（1）
检查大图像是否与拇指匹配怎么样？所以将代码更改为
How about checking if the big image matches the thumb? so change the code to