JQuery colorbox 奇怪的行为答案

【问题标题】：JQuery colorbox strange behaviourJQuery colorbox 奇怪的行为
【发布时间】：2012-06-12 09:09:06
【问题描述】：

我有一个奇怪的问题。我实际上在插件 jquery.colorbox.js 上工作。我的程序的目的是显示一个简单的 html 页面，其中包含指向显示图像的颜色框的链接。问题来自与css文件的链接。如果我把 URL href="colorbox.css" 它完美地工作，但是有了这个 href="css/colorbox.css" 动画似乎很好，但没有背景，颜色框只是一个带有图像的白色方块正确显示在其中心。但是所有酷炫的效果都不存在。

我的主项目文件夹中有 3 个文件夹以及 index.html 和文件 colorbox.css 的副本：

文件夹图片：palmiers.jpg
文件夹 css : colorbox.css
文件夹 js：jquery.min.js jquery.colorbox-min.js

文件：colorbox.css
文件：index.html

这里是 index.html 文件的内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
        <title>ColorBox Examples</title>
        <style>
            body
            {
                background-color:#666;
            }
        </style>
        <link rel="stylesheet" media="screen" type="text/css" href="css/colorbox.css"/>
        <script language="javascript" src="js/jquery.min.js"></script>
        <script language="javascript" src="js/jquery.colorbox-min.js"></script>
        <script>
            $(document).ready(function(){
                $("#image").colorbox({width:'500', height:'500'});
            });
        </script>
    </head>
    <body>
        <p><a id="image" href="images/palmiers.jpg">link to the lightBox</a></p>
    </body>
</html>

所以如果我改变这行代码：

<link rel="stylesheet" media="screen" type="text/css" href="css/colorbox.css"/>

作者：

<link rel="stylesheet" media="screen" type="text/css" href="colorbox.css"/>

颜色框显示正确。但我想将我所有的 css 文件放到 css 文件夹中。为什么当我更改链接时我有两种不同的行为？这两个 colorbox.css 文件完全相同。

有人可以帮助我吗？提前感谢您的回答。

【问题讨论】：

在您的代码中使用css/colorbox.css，在Google Chrome 中打开Index.html，右键单击，查看源代码，在您的head 标签中css/colorbox.css 应该是一个链接。点击链接。怎么了？你看到样式了吗？在此处发布网址
样式部分是：内联元素{}。它是空的，但是 html 源代码和我的一样。
对不起，防止答案是错误的。我单击了“css/colorbox.css”链接，它允许访问文件 colorbox.css 的全部内容。但这是一个巨大的内容。我不能在这里完整地发布它。所以链接似乎是正确的。这就是为什么我会发疯的原因。
请发布您点击css/colorbox.css后在浏览器中看到的网址
我建议使用 Chrome 并按 F12 键并查看控制台是否有任何 GET 错误。它会通过列出预期的路径/文件来说明它可能无法获得的内容。可以肯定的是，两个 colorbox.css 文件名应该是相同的文件大小（以字节为单位）......对吗？

标签： jquery html colorbox

【解决方案1】：

尝试在带有项目 url 的 head 标签内添加基本标签，例如：

<head>
<base href="http://your_site_url" />

不确定，但这可能会有所帮助

【讨论】：

你好。我在 localhost 中，所以我的 URL 以“file:///C:...”开头。我把它放在我的头部，它还不能工作。
@user1450730：我建议避免这种方法只是因为需要记住改变它......你不会一直记得这样做;）

【解决方案2】：

不确定这个问题是否真的与您的任何标签有关，这更像是一个简单的参考问题。

您可以通过在路径前加上 / 字符来指定“绝对”路径，前提是您的“css”文件夹是根目录文件夹，那么这应该可以工作...

<link rel="stylesheet" media="screen" type="text/css" href="/css/colorbox.css"/>

如果没有 / 前缀，您实际上是在声明一个“相对”路径，这意味着完整路径将从当前目录开始（即当前文件所在的位置）

【讨论】：

你好。我已经尝试过这个解决方案，但结果更糟：有一个动画，然后显示图像，但现在没有白色方块。屏幕上只有图像。
@user1450730：那么我怀疑您的文件夹结构可能有误，您确定您没有使用任何其他可能影响此的文件夹吗？你能访问这个网址吗？：localhost/css/colorbox.css
绝对确定：在我的主文件夹中，我有我的 index.html 以及其他三个包含 css、js 和 jpeg 文件的文件夹。只是当我输入 href="colorbox.js" URL 时它才起作用。这很疯狂！ “localhost/css/colorbox.css” URL 不起作用。在 CakePHP 框架上也是同样的问题。
您如何托管该网站？ Visual Studio 开发服务器？我刚刚在我的一个 css 文件上尝试了等效的方法，它工作正常......另外，你有任何虚拟目录设置吗？
不，它只是 localhost 中的一个测试程序。我用记事本++编辑了它。我首先尝试了用eclipse编辑的框架CakePHP，它完全一样。

【解决方案3】：

您看到的是插件没有找到它自己的图像资产（不是您的图像）的结果。

ColorBox 自己的 CSS 文件是指它使用的图像资源。它假设这些资产将存储在哪里。要使用任意位置，您需要编辑 ColorBox 自己的 CSS 文件以使用该位置。

【讨论】：