Javascript Shadowbox(图像库插件)仅显示黑色窗口
我正在尝试使用Shadowbox插件创建一个图像库(http://www.shadowbox-js.com).Javascript Shadowbox(图像库插件)仅显示黑色窗口,javascript,jquery,image,jquery-plugins,shadowbox,Javascript,Jquery,Image,Jquery Plugins,Shadowbox,我正在尝试使用Shadowbox插件创建一个图像库(http://www.shadowbox-js.com). 因此,我在创建图库时遇到了一个问题,这个问题是:每当我单击显示图像的链接(实际上是缩略图)时,它就会开始加载,然后没有图像显示,只有一个黑色窗口。 我使用的链接: <a href="http://localhost/myProject/images/10.jpg" rel="shadowbox"><img src="http://localhost/myProject
因此,我在创建图库时遇到了一个问题,这个问题是:每当我单击显示图像的链接(实际上是缩略图)时,它就会开始加载,然后没有图像显示,只有一个黑色窗口。
我使用的链接:
<a href="http://localhost/myProject/images/10.jpg" rel="shadowbox"><img src="http://localhost/myProject/thumbnails/10.jpg" class="thumbnails"/></a>
脚本/link/init:这些导入工作正常,我使用(在Chrome中)Inspect element->Network来验证它
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css">
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
Shadowbox.init();
备注:1-我正在使用Shadowbox作为jQuery插件(不是独立的)。
2-jQuery是使用Google(而不是本地)导入到我的网站的。
3-实际图像大小为3000x2400。
编辑:
4-我意识到,当右键单击->检查元素(在chrome中)时,会显示图像(但不是以正确的方式,仅显示一半)。
5-将
handleOversize
设置为drag
时,将显示图像(必须单击)。6-它在IE 9中工作 您是说图像在浏览器中显示不正确 这可能意味着文件已损坏。试着保存它
我已经使用Shadowbox很长时间了,类似的问题总是由坏文件或文件权限设置不正确引起的。由于您提供了一个本地主机的示例,我只能提供一般性指导,不能确切地告诉您问题是什么。链接当然会受到欢迎 首先,确保对jQuery的调用在对
shadowbox.js
文件的调用之前
除此之外,我相信你已经给了网页一个有效的!DOCTYPE
,就我目前所见,它使您的阴影框标记正确无误
问题可能是使用jQuery和缩略图的类名
如果jQuery使用特定样式修改了链接,Shadowbox的锚定标记可能会发生任何更改
这些更改将导致每个链接元素的阴影框看不到原始链接,因为它现在是jQuery链接。它需要被Shadowbox重新缓存
解决方案:完成对缩略图的任何修改后,尝试调用Shadowbox.init
,以便Shadowbox缓存链接一次,或者如果需要,使用Shadowbox API.clearCache()
和.setup()
重新缓存那些rel
锚
我还应该提到,您应该确保Shadowbox具有jQuery适配器接口,这是一个下载选项或WordPress插件选项。我找到了解决方案,它不在DOCTYPE或浏览器中,甚至不在我的JS代码中
问题出在CSS
将方向设置为从右向左(rtl)
(是的,网站是阿拉伯语)。
导致图像被隐藏,可能是因为图像正确,我看不见 打开shadowbox.css并设置方向:ltr
用于#sb containe
r这是一个老问题,但没有人正确回答这个问题。
解决方案如下:
只需在shadowbox中将“left”值替换为“right”,将“right”值替换为“left”。css不,图像没有损坏,正如我所说的6-它在IE 9中工作
如果图像未在IE以外的浏览器中显示,则可能意味着文件已损坏,IE仍可以显示该图像。我尝试将Shadowbox.init
放在页面底部,得到了相同的结果,并且在使用iE9时库也可以工作。记住Shadowbox.init只能调用一次。尝试检查类名是否导致问题。拆下它并重新测试。如果没有,则需要查看您的完整网页。如果你有更多的问题,也许你可以这样做?我删除了这个类,没有解决这个问题,这个类是为缩略图设计的,所以它与真实的图像没有任何关系。对于重建页面,我认为这不是正确的决定,因为它在IE9中工作,所以它可能是最好的!DOCTYPE,什么是正确的!DOCTYPE?如果缩略图类通过父对象受jQuery影响,则Shadowbox将继承这些CSS规则。实际上,Shadowbox受应用于干扰Shadowbox.CSS文件的元素的任何CSS规则的影响。它在IE9中工作的原因是不同的CSS规则影响了网页。正确的DOCTYPE基于您的标记。有超过1000篇文章是我自封的,用来帮助别人解决他们的暗箱操作问题,我相信一旦我看到你的标记,我就能帮助你。问题解决了。等待3小时添加答案。