Question

我试图使用here插件FancyZoom（点击缩略图显示完整图片）。

我稍微修改了一下以更好地满足我的需求，但不知何故它在IE中不起作用。

它在IE上的例外是：

SCRIPT5007: Unable to get value of the property 'css': object is null or undefined
jquery.fancyzoom.js, line 91 character 5

为了快速参考，javascript的代码片段是：

function closeZoomBox(o){
 var oImgZoomBox = o.oImgZoomBox;
 o.oImgClose.remove();
 $('div',oImgZoomBox).remove();
 var endClose = function(){
   oImgZoomBox.empty().remove();
   o.imgSrc.css('opacity',1); // THROWING ERROR HERE
};
}

I have my site hosted here

如果你能看看我在做什么，那将会非常有帮助。（或建议我任何其他适合我需要的插件）。

问题仅出在IE9上。它甚至适用于IE8，IE7。

我不能在22小时之前开始赏金，但我保证如果有人可以帮我解决，我会奖励100分。

Answer 1

它正好在插件的主页上，“影子插件仅适用于非浏览器，将其添加到html页面的标题中，花式缩放将在缩放的图像上显示阴影。”

以下是可在IE中使用的替代方案：Shadowbox.js似乎可以满足您的需求并适用于“所有主流浏览器”http://www.shadowbox-js.com/。或者，查看http://lokeshdhakar.com/projects/lightbox2/上的灯箱2“适用于所有现代浏览器”和“Lightbox2是开源的。”

Answer 2

你可以使用CSS3的转换 - 它们受到MSIE 10的支持并且更好 - 不需要javascript！

<style>
 img {
  width: 32px;
  height: 32px;
  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
 }
 img:target {
  width: 64px;
  height: 64px;
 }
</style>
<a href="#img1"><img id="img1" src="./img.png" /></a>
<a href="#img2"><img id="img2" src="./img.png" /></a>

这么简单：D

编辑：Here是jsFiddle的链接。

Answer 3

所以我浏览了所有的Javascript代码并找出了问题，这是在图像的文件名中。我正在使用"registration pages.png"（带空格），它在某种程度上将此文件名转换为代码中的"registration%20pages.png"并将其与原始文件名进行比较。这是一个蹩脚的错误，但我认为这更像是我实施的方式。

感谢那些投入时间的人。

在IE上使用Fancy zoom有麻烦

3 个答案: