Cross-browser gallery compatibility, .load() issue?

Question

I'm having some cross-browser compatibility problems. Instead of put all the code here, I link you the page: http://www.smaskerando.org/spettacoli/disney.html
In the bottom left part of the page, you can see a small gallery. When you click on the small thumbnails, a larger version of the photo appear in the middle of the screen. It works perfectly on Chrome, but it has problems on Firefox and Internet Explorer.
I think the problem is in these lines:

$(".galleryPopUp").load(function(){
    var width = $(this).width()
    var height = $(this).height()

      if (width < height)
      {$(this).css("width","25%")}

      else
      {$(this).css("width", "50%")} 
})

They seem to not recognize the .load() method.
You can get the full code from the page looking for the file "script.js" and going to line 379 (the full gallery function).

Have you got any idea how to solve it?
Thank you all!

Answer 1

You should put your own script under jQuery call, cause you're using jQuery and may don't be avaible when you call it.

It's not maybe the cause, but is an goo practice.

I tried on Chrome and it llooks like works OK.

Answer 2

Ok, I found the solution! And I hope it could help. The problem wasn't about the .load() . It was about the div I was trying to append. Actually is a really small difference I didn't notice till now:
Firefox and Internet Explorer automatically quoted the value of the attribute src of the image I was inserting. Chrome doesn't do it. So to be more clear:
This was what happened on chrome:

... <img src="img/example.jpg" />

And this was happening on firefox/IE:

... <img src=""img/example.jpg"" />

So obviously firefox didn't recognize the image. I solve this problem using jQuery migrate and adding this line if ( $.browser.mozilla ) and I removed the "" from the string when using firefox.
Thank you anyway for the quick answers!