Fancybox：链接，用于更改地址栏中的网址，并链接到带有打开的Fancybox的页面

Question

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 基本上，我需要获取fancybox链接以将地址栏中的url更改为如下所示： 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. 另外，如果我要访问www.website.com/page/#lightbox ，则对应于该链接的灯箱将自动打开。

A great example of this is in this site: http://www.rudirakete.de/rudirakete/main#2008-10-5-1524260693 此站点中的一个很好的例子： http : //www.rudirakete.de/rudirakete/main#2008-10-5-1524260693

Answer 1

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). 最简单的方法是使主题标签的值也就是您要在fancybox中显示的页面上某些元素的ID（尽管不是必须的）。

Then, just use the hashtags for your link hrefs, and do not use jQuery's preventDefault() function on those links. 然后，仅对链接href使用主题标签，而不对这些链接使用jQuery的preventDefault()函数。 That way, those links will alter the url bar, appending the hash tag that you set as their href values. 这样，这些链接将更改网址栏，并附加您设置为其href值的哈希标签。 Then, attach the function to display the fancybox to those links. 然后，附加功能以将花式框显示到那些链接。

Finally, call that function with the value of location.hash as your argument. 最后，使用location.hash的值作为参数来调用该函数。

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：链接，用于更改地址栏中的网址，并链接到带有打开的Fancybox的页面

问题描述

1 个解决方案

解决方案1
5 2011-10-21 01:18:59

Fancybox：链接，用于更改地址栏中的网址，并链接到带有打开的Fancybox的页面

问题描述

1 个解决方案

解决方案1 5 2011-10-21 01:18:59

解决方案1
5 2011-10-21 01:18:59