如何使用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？

回答

相關問題