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

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

1 个答案: