Fancybox：链接改变地址栏中的网址，并链接到一个打开的Fancybox页面

基本上，我需要的是获得fancybox链接来更改地址栏中的网址，如下所示： www。 website.com/page/#lightboxFancybox：链接改变地址栏中的网址，并链接到一个打开的Fancybox页面

另外，如果我想去参观www.website.com/page/#lightbox，则对应于该链接会自动打开收藏夹。

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

2011-10-21 user1006257

看看是否有帮助http://jsfiddle.net/f2fRM/2/show –

诀窍就是让单一的功能显示基于一些包括hashtag你想要的内容。最简单的方法是使hashtag的值也是你希望在fancybox中显示的页面上某个元素的ID（尽管绝不是必需的）。

然后，只需使用您的链接hrefs的hashtags，并且不要在这些链接上使用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>

来源

2011-10-21 01:18:59 rossipedia

漂亮！完美的作品！非常感谢LOT男士 – user1006257

没问题！想将它标记为已接受的答案？ – rossipedia

Fancybox：链接改变地址栏中的网址，并链接到一个打开的Fancybox页面

回答

相关问题