jQuery模態和深層鏈接

我目前有一個畫廊，當你點擊縮略圖時會打開一個模態彈出窗口。我想要做的是能夠爲模式（即www.mywebite.com/#link1）專門生成一個獨特的鏈接，它通過ajax加載它的內容。如果有人發送這種獨特的模式鏈接並將其發送給某人，並將其粘貼到瀏覽器中，理想情況下，我希望模式窗口自動加載和顯示其內容，而無需用戶點擊相應的縮略圖。jQuery模態和深層鏈接

這甚至可能嗎？我知道這不是最簡單的任務，任何幫助都將不勝感激。

得到什麼我正在去到的一個想法： http://www.ddbremedy.co.uk/siteupdate/work

你會看到一臺iMac屏幕上的縮略圖。

非常感謝提前。

UPDATE !!!!!

好吧，這是我目前在哪裏。我已決定使用jquery地址進行報廢，並使用'window.location.hash'進行深度鏈接。

代碼是這樣的：

var base_url = "http://www.ddbremedy.co.uk/siteupdate/"; 

$('#work_gallery li a').on('click', function(event) { 

    event.preventDefault(); 
    postLink = $(this).attr('href'); 
    window.location.hash = postLink.replace(base_url, ""); 


    /* I have a bunch of code that animates the modal window 
    in which I don't need to include as there is quite alot of it. 
    Content loads via ajax. Then when I close the modal I add this 
    code to remove the hash and revert the link back to its original state. */ 

    if ("pushState" in history) { 
     history.pushState("", document.title, window.location.pathname); 
    } else { 
     window.location.hash = ""; 
    } 

});

上面的代碼工作正常，並顯示正是我希望它當我加載和關閉外部內容與阿賈克斯的聯繫。現在我需要弄清楚的是，如果有人將該鏈接粘貼到地址欄中，我可以自動加載ajax內容。內容是基於鏈接href和一個點擊事件加載的，那麼我怎麼欺騙瀏覽器認爲點擊了正確的鏈接並加載了正確的內容，純粹是基於它的鏈接？

來源

2013-03-22 user1391152

我認爲這些可能會對您有所幫助。 http://www.asual.com/jquery/address/和https://github.com/balupton/History.js – darshanags 2013-03-22 15:22:59

嗨，謝謝你的回覆。我已經使用jQuery地址來創建深層鏈接，我似乎可以開展工作。問題是將該url粘貼回單獨的窗口並獲取模式激活。 – user1391152 2013-03-22 15:25:02

你應該發佈你的代碼然後:)我會一直持續到明天，但如果有人在這裏沒有幫助你，我明天可以回覆你。如果您已經設置了地址，那麼很可能是調整您的代碼以使其按您希望的方式工作。 – darshanags 2013-03-22 15:34:17

管理得到它的工作。我是這麼做的：

首先我運行一個名爲'checkUrl'的函數，它檢查URL是否包含散列。

checkUrl = function() { 
    if (window.location.hash) { 

    } 
}; 

checkUrl();

然後在if語句中，我將哈希路徑存儲到變量中並將其從哈希中拆分。然後我將散列之後的字符串存儲到變量中。

var pathname = window.location.hash, 
    rez = pathname.split('#'), 
    linkUrl = rez[1];

我然後傳遞該變量作爲具有該特定的href鏈接的選擇器，並觸發對應的鏈路，然後動畫和負載在正確的模態上的單擊事件。

$("a[href='http://www.ddbremedy.co.uk/siteupdate/" + linkUrl + "']").trigger('click');

希望這將有助於未來的人。

來源

2013-03-26 10:59:36 user1391152

它運作良好！做得好。我遵循你的照片網站的方法http://journal.tumultes.net/les-iles-traversees/ – jjj 2013-11-20 12:57:32

這是完全可能的。使用jquery simplemodal半僞代碼：

$(document).ready(function() { 
    /* Get the hash from window.location */ 
    var theHash = window.location.hash; 
    if (theHash !== '') 
    { 
     /* Load something related to it */ 
     $.get(something-from-somewhere, function(data) { 
      /* Open the simplemodal and put the returned data inside it */ 
      $.modal(data); 
     }); 
    } 
});

顯然還有更多的負載，你可以用模式，您將在the documentation找到做。

來源

2013-03-22 15:28:07

jQuery模態和深層鏈接

回答

相關問題