Question

以下代码在FF chrome等中工作正常，但不是IE，任何人都知道为什么？

基本上一切都可以接受替换图像属性

$("#container #main_image img#largeId").attr({ src: largePath });

即使是函数的其余部分，即交换类也可以工作，而不是图像替换。在这里可以看到完整的示例example点击图像并尝试在模态窗口右侧的缩略图之间切换。

我想要的效果类似于这个网站webdesignerwall的效果，jQuery几乎完全相同 - 虽然这适用于IE !!!!

jQuery(document).ready(function($) {

  $("a.group").fancybox({
    'frameWidth':966,
    'frameHeight': 547,
    'hideOnContentClick': false,
    'overlayOpacity': 0.85,
    'callbackOnShow': function() {
      $("#container ul#thumbnails li a").click(function(){
        var largePath = $(this).attr("title");
        $("#container #main_image img#largeId").fadeOut().hide();
        $("#container #main_image img#largeId").attr({ src: largePath });
        $("#container #main_image img#largeId").fadeIn("slow");
        $('.active').removeClass('active');
        $(this).addClass("active");return false;
      });
    }
  });

});

Answer 1

好的，我已经解决了。这是痛苦的，我得出结论，插件是完全错误的：）

插件会复制隐藏的内容并将其插入“框”中。这意味着你到处都是重复的id，这当然是无效的，有趣的事情开始发生。当你为$（'＃largeId'）做选择器时，它实际上引用了原始的隐藏照片。如果从#hidden中删除display：none样式，则可以看到此内容。

结论是使用实际附加内容而不是重复内容的灯箱。我不喜欢作者所听到的内容。

您可以修改插件代码以使用append而不是使用（插件的第112行）像这样

 var newHtml = $('<div id="fancy_div" />').append(target);
 _set_content(newHtml.html(), opts.frameWidth, opts.frameHeight);

然后，您必须处理在灯箱关闭时放回html的问题。但是我会更倾向于找到更好的灯箱！

Answer 2

您是否使用过Fiddler来查看图像是否被请求？

这对我来说总是有用的：$（“＃foo”）。attr（“src”，url）;

你也可以改为替换。

$（'＃foo'）。before（'＆lt; img src =“”... /＆gt;'）。remove（）;

Answer 3

＆lt; a＆gt;的title属性中列出的路径标签不正确（检查案例）。具体地，

<a class="group" href="#hidden" title="images/2_large.jpg">

应该是

<a class="group" href="#hidden" title="Images/2_large.jpg">

Firefox更宽容，但IE拒绝这样的恶作剧。

Answer 4

除了BipedalShark的回答之外，我还注意到了一些困扰我的想法：

您正在页面的头部谷歌中调用jquery.min.js。
稍后，您将在页面底部附近调用fancybox.js。
最后，你正在调用另一个jquery.js。

所以我知道（以及可能的解决方案）是否可能是问题的部分原因？或者，是否需要在页面底部加载fancybox？

Answer 5

基本上，这已通过将目标元素从“ID”更改为“类”来解决。

这需要完成，因为Fancybox在调用模态窗口时复制了id！

非常感谢大家帮忙！

有谁告诉我为什么这个Jquery在IE中不起作用？

5 个答案: