Question

I’m making a very simple gallery using jquery, it works in all browsers but fails in IE8 and 7.

Any ideas why and how would I debug it?

//Gallery system, single and compare pages
function makeGallery (whichThumb,whichMainImage,whichImageWrap) {
    $(whichThumb).live("click", function() {
        $(whichMainImage).hide();
        $(whichImageWrap).css('background-image', "url('images/no-image.png')");
        var i = $('<img />').attr('src',this.href).load(function() {
            $(whichMainImage).attr('src', i.attr('src'));
            $(whichImageWrap).css('background-image', 'none');
            $(whichMainImage).fadeIn();
        });
        return false; 
    });
} // End makeGallery

What happens is that image changes to no-image.png and nothing happens after that…
I’m setting up jsfiddle for demonstration…

Answer 1

You should reverse setting the onload callback and src :

  var i = $('<img />');
  i.load(function() {
        $(whichMainImage).attr('src', i.attr('src'));
        $(whichImageWrap).css('background-image', 'none');
        $(whichMainImage).fadeIn();
  });
  i.attr('src',this.href);

On old ie versions you wouldn’t have the callback called if the browser is fast enough to fetch the image (from cache for example) and it’s generally the best practice to use this order.

As live was deprecated a long time and is now removed from last versions, you should use on instead.