Fancybox list of pictures not showing up in Internet Explorer

Question

I am currently using fancybox for my image gallery. I am having serious difficulty with getting it to work well in Internet Explorer. Every other browser I have tried works - besides Internet Explorer.

The Problem:

Every time I reload the page, some of the pictures show, and others do not. It's always a random few pictures, not the same ones repeatedly.

I tried the solution posted from this similar question, but it didn't fix my issue.

This is the code I'm using - is anything in particular sticking out?

<script type='text/javascript'>
$(document).ready(function(){
    $('ul.imagegallery img').resizecrop({
      width: 146,
      height: 146,
      vertical:"top"
    });  
    $('a[href$='.jpg'],a[href$='.png'],a[href$='.gif']').attr('rel', 'gallery');
    $('.fancybox').fancybox({
        beforeLoad: function() {
            this.title = $(this.element).attr('caption');
        },
    prevEffect  : 'none',
    nextEffect  : 'none',
    helpers  : {
      title  : {
        type: 'inside'
      }
    },
        margin : [20, 80, 20, 80]
    });
  }); 
</script>

Here is a fiddle if you want to see the page. It looks fine on the fiddle, but it does not work in Internet Explorer.

Answer 1

After a lot of looking at this, I believe I have deciphered the answer.

$('a[href$='.jpg'],a[href$='.png'],a[href$='.gif']').attr('rel', 'gallery'); This line is completely unnecessary.

$('ul.imagegallery img').resizecrop({
  width: 146,
  height: 146,
  vertical:"top"
});  

This is best to just be left out, and supplemented with css by saying:

<style type="text/css">
    .imagegallery img {
        width: 146px;
        height: 146px;
     }
</style>

From that, the document ready should look like this:

$(document).ready(function(){
    $("a.fancybox").fancybox({
        beforeLoad: function() {
            this.title = $(this.element).attr('caption');
        },
    prevEffect  : 'none',
    nextEffect  : 'none',
    helpers  : {
    title  : {
        type: 'inside'
    }
    },
        margin : [20, 80, 20, 80]
    });
  });