0

我需要一些关于 jQuery 的帮助。我想做的是创建某种小型图片库。在这个画廊里，我有几张小照片和一张大照片。通过单击小图片，我希望 jQuery 加载并替换大图片。

这是一个不起作用的小尝试！但可能有人可以告诉我为什么。

$(function(){
   $("a.smallpics").click(function(e){
      $(".bigpic")
      .load(function () {
          $(this).hide();
          $('#loader')
            .append(this);
            .removeClass('loading')
          $(this).fadeIn();
      });
      .attr('src', this.href);
      e.preventDefault();
   });
});

和html

<a href="pic1_big.jpg" class="smallpics" /><img src="pic1_small.jpg" style="width: 20px; height: 20px" /></a>
<a href="pic2_big.jpg" class="smallpics" /><img src="pic2_small.jpg" style="width: 20px; height: 20px" /></a>
<a href="pic3_big.jpg" class="smallpics" /><img src="pic3_small.jpg" style="width: 20px; height: 20px" /></a>
<div id="loader" class="loading" /><img src="pic3_big.jpg" class="bigpic" /></div>

所以在最好的情况下，脚本会用灰色半透明层覆盖大图片，启动微调器并在加载后淡入图片。（微调器在“加载”类的背景中）

谢谢你的帮助。

4

3 回答 3

1

你有点重新发明轮子......第 4,000,000 次，但它是学习 jQuery 的一个很好的练习。

对于在网页上调试 javascript，没有什么比 Firefox + Firebug 插件更好的了。

于 2009-12-11T18:57:47.603 回答
0

由于没有正确链接事物，您可能会遇到很多 js 错误，但您的解决方案中的逻辑也有一点缺陷。

但是，如果我正确理解了您的问题，您需要在事件之前隐藏大图load，并在load事件中再次显示它：

$(function(){
    $('a.smallpics').click(function() {        
        var $bigpic = $('.bigpic');
        var $loader = $('#loader').show();        
        $bigpic.hide().load(function () {
            $loader.fadeOut();
            $(this).fadeIn();
        }).attr('src', $(this).attr('href'));
        return false;
    });
});
于 2009-12-11T19:02:09.840 回答
0

您可能想查看这个 jQuery 加载器插件...或者这个。

于 2009-12-11T19:02:18.423 回答