Internet Explorer 中未显示的 Fancybox 图片列表

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 如果您想查看该页面。它在 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]
    });
  });

Internet Explorer 中未显示的 Fancybox 图片列表

Fancybox list of pictures not showing up in Internet Explorer

jquery

internet-explorer

fancybox