Fancybox список фотографий, которые не отображаются в Internet Explorer

Question

Я использую fancybox для своей галереи изображений. У меня серьезные трудности с тем, чтобы он хорошо работал в Internet Explorer. Каждый другой браузер, который я пробовал, работает - помимо Internet Explorer.

Проблема:

Каждый раз, когда я перезагрузить страницу, некоторые картин показать, а другие нет. Это всегда случайные несколько снимков, а не одни и те же.

Я пробовал решение, отправленное с this similar question, но это не исправило мою проблему.

Это код, который я использую, - что-то особенное торчит?

<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> 

Вот fiddle, если вы хотите, чтобы увидеть страницу. Он отлично выглядит на скрипке, но он не работает в Internet Explorer.

Answer 1

После долгих раздумий, я считаю, что я расшифровал ответ.

$('a[href$='.jpg'],a[href$='.png'],a[href$='.gif']').attr('rel', 'gallery'); Эта линия совершенно не нужна.

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

Это лучше просто быть опущены, и дополнить с помощью CSS, говоря:

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

От того, документ готов должен выглядеть следующим образом:

$(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] 
    }); 
    });