Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/jquery/73.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/5/date/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Shadowbox(图像库插件)仅显示黑色窗口_Javascript_Jquery_Image_Jquery Plugins_Shadowbox - Fatal编程技术网

Javascript Shadowbox(图像库插件)仅显示黑色窗口

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

我正在尝试使用Shadowbox插件创建一个图像库(http://www.shadowbox-js.com).
因此,我在创建图库时遇到了一个问题,这个问题是:每当我单击显示图像的链接(实际上是缩略图)时,它就会开始加载,然后没有图像显示,只有一个黑色窗口。
我使用的链接:

<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小时添加答案。