0

我大部分时间都在阅读stackoverflow，因为我正在构建一个图片库，我希望通过鼠标单击缩略图上方的一个较大的div来控制一组嵌套的缩略图div。我想使用 jQuery 而不是 iFrames，但我被卡住了。目前我有以下脚本

$(document).ready(function(){
$('#div_2').hide();

$("#mybutton1").click(function(){
$("#div_1").fadeOut(1000, function(){
$("#div_2").fadeIn(1000);
  });
});
$("#mybutton2").click(function(){
$("#div_2").fadeOut(1000, function(){
$("#div_1").fadeIn(1000);
    });
  });
});

我前进的挑战是我希望单击任何缩略图以将该图像的较大版本加载到预览区域中。如果我有 10 个缩略图，我不能让每个缩略图都淡出所有其他可能存在的缩略图，而是我想连接代码，以便那里的任何图像都会淡出，并且单击的缩略图的较大版本on 会淡入。

我曾考虑将缩略图链接到较大的预览图像，然后使用以下功能禁用标准链接行为：

$('.gallery_thumbnails a').click(function(e) {
e.preventDefault();
});

然后我想我可以合并以下内容，尽管我不确定如何完全实现它：

$('.gallery_preview').html('<a style="background-image:url('+photo_preview+');"></a>');

我发现其中一个向我提出类似问题的线程很有趣，但我无法完全理解它是如何工作的： https ://stackoverflow.com/a/3420033/1422589

另外，如果不使用 .hide，如何动态加载页面上没有的 div？

很多问题，我知道 - 任何帮助将不胜感激！

4

1 回答 1

1 
$('.gallery_thumbnails a').click(function(e){
    e.preventDefault();
    var bigImageLink = $(this).attr("href");
    $("#div_1").fadeOut(1000, function(){
        $(this).find("img").attr("src", bigImageLink).fadeIn(1000); 
    });
});

确保href缩略图链接中有指向大图版本的直接链接，并且里面#div_1只有一个img标签。

于 2012-05-29T01:37:03.740 回答