Anyone tell me why this Jquery doesn't work in IE?

Question

The following code works fine in FF chrome etc but not IE, anyone know why?

Basically everything works accept the replacement of the image attribute

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

Even the rest of the function ie the swapping classes works, just not the image replacement. The full example can be seen here example click on an image and try and swap between the thumbnails on the right in the modal window.

The effect i'm going for is similar to that from this website webdesignerwall, the jQuery is almost exactly the same - although this works with 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

Have you used Fiddler to see if the image is being requested?

This always works for me: $("#foo").attr("src",url);

You could also just do a replacement instead.

$('#foo').before('<img src="" ... />').remove();

Answer 2

The paths listed in the title attribute of your <a> tags are incorrect (check case). Specifically,

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

should be

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

Firefox is a little more forgiving, but IE is rejecting such shenanigans.

Answer 3

In addition to BipedalShark's answer, I noticed a few things that sorta stuck in my mind:

1. You're calling jquery.min.js from google up in the head of your page.
2. Later on, you're calling fancybox.js near the bottom of the page.
3. Finally, you're calling another jquery.js after it.

So I know (as well as a possible solution) is it possible that this is partially responsible for the problem? Or, does fancybox need to be loaded at the bottom of the page?

Answer 4

Ok, I have worked it out. it was painfull and I conclude that the plugin is plain wrong:)

The plugin duplicates the hidden content and inserts it into the 'box'. This means you end up with duplicate id's everywhere which of course is invalid and funny things start to happen. When you do you selector for $('#largeId') it actually references the original hidden photo. You can see this if you remove the display:none style from #hidden.

Conclusion is to use a lightbox that actually appends the content rather than duplicates it. I do not like what the author has done hear.

You could amend the plugin code to use append instead of using (line 112 of the plugin) like this

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

You will then have to deal with putting the html back when the lightbox is closed. However I would be more inclined to find a better lightbox!

Answer 5

Basically this has been resolved by changing the destination element from an 'ID' to a 'class'.

This needs to be done because of Fancybox duplicating the id when calling the modal window!

Many thanks for everyones helps here!