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模态和深层链接

回答

相关问题