Question

基本上，我需要的是获取fancybox链接以将地址栏中的url更改为以下内容：的 www.website.com/page/#lightbox

此外，如果我要访问 www.website.com/page/#lightbox ，则该链接对应的灯箱将自动打开。

这个网站的一个很好的例子是： http://www.rudirakete.de/rudirakete/main#2008-10-5-1524260693

Answer 1

诀窍是根据一些标签创建一个显示所需内容的功能。最简单的方法是使hashtag的值也是你要在fancybox中显示的页面上某个元素的ID（尽管不是必需的）。

然后，只需使用hash标签作为链接hrefs，不要在这些链接上使用jQuery的preventDefault()函数。这样，这些链接将改变URL栏，附加您设置为其href值的哈希标记。然后，附加功能以将fancybox显示到这些链接。

最后，调用该函数，其值为location.hash作为参数。

这只是一个简单的例子。似乎做你想要的。

<!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的页面的链接

1 个答案: