Question

我正在尝试使用灯箱打开谷歌日历。我已经在使用Colorbox的另一个网页上看到了它（这里：http://www.orovalleybicycle.com/点击右侧的'展开到完整日历'），但是当我尝试实现一些非常相似的东西（也使用颜色框）时，日历是拒绝在彩盒内打开。当我点击应该触发彩盒的超链接时，它只是导航离开我的页面并直接打开谷歌日历网址。

所以基本上，这是我的代码的相关部分......我已经尽可能地复制了演示页面上的内容（http://www.jacklmoore.com/colorbox/example1/），以便我知道它应该工作（除非你看到相对的地方）网址我实际上使用了绝对的URL，为安全性和简化而改变了：

在我的<head>代码中：

<link rel="stylesheet" href="colorbox/colorbox.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="colorbox/jquery.colorbox.js"></script>

<script>
    $(document).ready(function(){
        $(".colorboxcal").colorbox({iframe:true, width:"80%", height:"80%", transition:"fade"});
    });
    </script>

身体：

<a class="colorboxcal" href="https://www.google.com">Open Full Calendar</a>

但基本上，它表现得好像只是说：

<a href="https://www.google.com">Open Full Calendar</a>

我已经尝试了以下方法来解决导致问题的原因：

检查绝对路径是否正确
尝试将jquery.min的引用更改为本地计算机上的副本，并尝试了不同的版本（没有区别）
尝试将'href'更改为直接指向我电脑上的图像（结果：点击链接在浏览器窗口中打开图像，这样老问题）
将href属性移动到顶部的<script>代码中（结果：单击链接没有做任何操作。错误的光标显示错误，并且不像链接那样，只是文本。）
将相同的代码放在测试页面中，除了基本要素之外别无其他（结果：点击链接打开了URL，所以同样是老问题。）
尝试删除覆盖.colorbox默认值的所有属性，除了width＆amp;身高（结果：同样的老问题）
尝试删除ready(function()内容，并将<script>代码置于</a>标记所需的位置（结果：同样的问题）

我很想检查颜色盒是否实际被触发或加载，但我无法弄清楚如何。

我已经检查过，我的页面很好地验证为xhtml（使用w3和使用Dreamweaver），所以我不认为我有任何愚蠢的未封闭标签或任何导致问题的东西。但它可能是我忽略的同样明显的东西！我用php来调用header＆amp;页脚＆amp;导航，我在网站的其他地方有一个图像“滑块”使用javascript和jquery，它的工作正常。我试过在firefox和chrome中使用它（本地托管），但结果在两者中是相同的，所以我认为它与更广泛的问题无关。我的php正在被xampp lite解析（？什么是正确的术语？）但是我用Google搜索并且找不到任何预期的混淆。

我开始构建这个网站作为html，php，javascript，jquery的完整新手 - 很多，所以如果你聪明的灵魂需要愚蠢的回应，那么道歉......我是一个绝对的菜鸟，我的脑袋是游泳的！但有人（请！）有任何建议，为什么彩盒不工作？谢谢你提前!!

Answer 1

有些网站不允许您在iframe中显示它们，www.google.com就是其中之一。

colorbox不会打开灯箱，而是直接打开URL

1 个答案: