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頁面

回答

相關問題