Fancybox：更改地址栏中的URL并链接到具有打开的Fancybox的页面的链接 [英] Fancybox: link that changes the url in address bar and links to a page with an open Fancybox
问题描述
基本上，我需要的是获取fancybox链接以将地址栏中的网址更改为以下内容：
www.website.com/page/#lightbox
Basically, what I need is to get the fancybox links to change the url in the address bar to something like this: www.website.com/page/#lightbox
此外，如果我要访问 www.website.com/page/#lightbox ，则该链接对应的灯箱将自动打开。
Also, if I were to visit www.website.com/page/#lightbox, then the lightbox corresponding to that link will automatically open.
这个网站的一个很好的例子是：
http://www.rudirakete.de/rudirakete/main#2008-10-5-1524260693
A great example of this is in this site: http://www.rudirakete.de/rudirakete/main#2008-10-5-1524260693
推荐答案
诀窍是根据一些标签创建一个显示所需内容的功能。最简单的方法是使hashtag的值也是你要在fancybox中显示的页面上某个元素的ID（尽管不是必需的）。
The trick is to make a single function for displaying the content you want, based on some hashtag. The simplest way to do that is make the value of the hashtag also the ID of some element on the page you want to display in fancybox (although by no means required).
然后，只需使用主题标签作为链接hrefs，不要在这些链接上使用jQuery的 preventDefault（）函数。这样，这些链接将改变URL栏，附加您设置为其href值的哈希标记。然后，附加函数以将fancybox显示到这些链接。
Then, just use the hashtags for your link hrefs, and do not use jQuery's preventDefault() function on those links. That way, those links will alter the url bar, appending the hash tag that you set as their href values. Then, attach the function to display the fancybox to those links.
最后，调用该函数的值为 location.hash 作为你的论点。
Finally, call that function with the value of location.hash as your argument.
这只是一个简单的例子。似乎做你想要的。
Just whipped this up as a simple example. Seems to do what you want it to.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script src="fb/fb.js" type="text/javascript"></script>
<link rel="stylesheet" href="fb/fb.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/javascript" charset="utf-8">
$(function(){
function showfb(id) {
switch(id) {
case '#fb1':
case '#fb2':
// Gotta do this so that fb can measure the content dimensions
$(id).show();
$.fancybox({
href: id,
type:'inline',
// This is so that the content doesn't just pop back on to the
// page when finished. Of course, if you're not using inline content
// then this may not apply
onClosed: function() {
$(id).hide();
}
});
break;
}
}
showfb(location.hash);
$('a.fblink').click(function(e){
showfb($(this).attr('href'));
});
});
</script>
<style type="text/css" media="screen">
/* I'm assuming you want the fancybox content to
ONLY be displayed in the fancybox. Once again, if using
ajax or some other method of getting fancybox content, this might
not be necessary */
.fb { display: none; }
</style>
</head>
<body>
<p>
<a class='fblink' href="#fb1">Show 1</a>
</p>
<p>
<a class='fblink' href="#fb2">Show 2</a>
</p>
<div id="fb1" class="fb">This is a test</div>
<div id="fb2" class="fb">This is another test</div>
</body>
</html>
这篇关于Fancybox：更改地址栏中的URL并链接到具有打开的Fancybox的页面的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
