我目前正在构建一个站点并使用Shadowbox JS插件来显示图像。
因为我们通过JSP提供图像(而不是直接链接到图像文件),所以Shadowbox似乎无法动态确定它们的宽度和高度,因此只需在屏幕大小的叠加层中打开图像。
可以使用'rel'手动将宽度和高度传递到shadowbox插件,因此我使用以下代码解决了FF / Chrome / Safari的问题:
$('#pic1img').attr("src")).load(function() {
picWidth = this.width;
picHeight = this.height;
});
$(window).load(
function() {
var w = $("#pic1img").width();
var h = $("#pic1img").height();
if( picWidth < w ){ picWidth = w; }
if( picHeight < h ){ picHeight = h; }
$('#pic1').attr('rel', 'shadowbox[pics];height=' + picHeight + ';width=' + picWidth);
}
);
但我找不到任何方法在IE中做同样的事情。
答案 0 :(得分:3)
一旦我开始以全尺寸加载缩略图然后在加载后设置它们的宽度和高度,代码实际上工作。
问题是我正在设置一个周围的div
display: none
直到图像被加载并且IE无法计算出隐藏图像的大小。
通过设置
解决了这个问题visibility: hidden
代替。
答案 1 :(得分:1)
将document.getElementById("pic1img").width
替换为$('#pick1img').width()