如何使用jquery lightbox插件colorbox构建一个打开页面的URL？

我正在使用jquery lightbox插件colorbox（http://colorpowered.com/colorbox/），我希望能够构建一个像www.example.com/about-me.html这样的URL，将用户发送到我的网站并打开iframed页面（about- me.html）在lightbox脚本中。如何使用jquery lightbox插件colorbox构建一个打开页面的URL？

我相信我必须使用事件挂钩或其他东西，但我不知道如何实现结果。任何帮助赞赏。

来源

2009-09-05 ritch0s

信用卡转到杰克摩尔在colorbox谷歌组。

他的解决方案适应了这个问题：

var url = document.location.href; 
if(url.search(/\?about-me/i) !== -1){ 
    $(".iframe:first").click(); 

}

所以这个网址被www.example.com?about-me这将用户带到主页和这个JavaScript会发现，参数和颜色框告诉打开它。

原谷歌组线程和更多的信息：http://groups.google.com/

来源

2009-09-06 21:49:06 ritch0s

编辑 - 更新了以下

我的源代码示例我不熟悉收藏夹，但我会假设，所有你需要做的就是创建一个页面，并呼吁window.load或DOM准备灯箱如：

$(document).ready(function() { 
    if(document.location.hash){ 
    //launch colorbox and use this hash 
    $.fn.colorbox({width:"50%", inline:true, href:""+document.location.hash+""}); 
    } 
});

来源

2009-09-05 13:25:38 robjmills

我想这肯定是你以后，我不是100％确定是唯一的事情，他们的语法来发动颜色框没有一个事件，这看起来虽然。 – robjmills 2009-09-05 14:16:40

请参阅examples关于如何访问其他内容。如果我正确理解你的问题，你想在iframe中显示一个外部源。你可以这样做，使用：

（从示例页面）

$(".iframe").colorbox({iframe:true}); 

<p><a class='iframe' href="http://google.com">Outside webpage (IFrame)</a></p>

更新：如果你想要的是有一些像上面的代码显示在页面上，当你输入一个网址，然后我建议你使用参数或URL重写来完成它。这个想法是，您的网址将包含要加载到iframe中的页面，并在服务器上提取此内容并使用它来构建类似上面的代码页面上的代码。

http://www.example.com/main?load=about.htm

或使用类似的MVC，你可能有：

http://www.example.com/main/about

这将调用主控制器上的有关行动。这将呈现一个视图，其中包含将“about.htm”内容文件注入iframe的代码。

来源

2009-09-05 13:29:52 tvanfosson

我已经这样做了，问题是直接链接可以粘贴到地址栏中，但仍然会转到我的网站，然后在Lightbox中打开该页面。例如：www.example.com/#about-me.html将被colobox拾起，然后在Lightbox中打开它。这很难解释 – ritch0s 2009-09-05 13:41:29

在这种情况下，我建议你使用URL上的参数来处理服务器端。获取？href = about.htm参数，然后在服务器上注入上面的代码，以便在您想要的位置显示灯箱。我会更新。 – tvanfosson 2009-09-05 13:57:50

如何使用jquery lightbox插件colorbox构建一个打开页面的URL？

回答

相关问题