[英]Fancybox list of pictures not showing up in Internet Explorer
I am currently using fancybox for my image gallery. 我目前正在将fancybox用于图片库。 I am having serious difficulty with getting it to work well in Internet Explorer.
我很难使它在Internet Explorer中正常工作。 Every other browser I have tried works - besides Internet Explorer.
我尝试过的所有其他浏览器都可以工作-除了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.
看起来很不错,但是在Internet Explorer中不起作用。
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: 最好只保留它,并在CSS中补充说:
<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]
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.