2011-10-21 10 views
0

基本的には、アドレスバーのURLを変更するためのfancyboxリンクを取得する必要があります: www。私はwww.website.com/page/#lightboxを訪問した場合website.com/page/#lightboxFancybox:アドレスバーのURLを変更するリンクと開いているFancyboxのページへのリンク

はまた、そのリンクに対応するライトボックスが自動的に開きます。

本の偉大な例では、このサイトにあります。 http://www.rudirakete.de/rudirakete/main#2008-10-5-1524260693

+0

これが役立つかどうかを確認してくださいhttp://jsfiddle.net/f2fRM/2/show –

答えて

5

トリックは、いくつかのハッシュタグに基づいて、必要なコンテンツを表示するための単一の関数を作ることです。これを行う最も簡単な方法は、ハッシュタグの値を、ファンシーボックスに表示したいページ上のいくつかの要素のIDにすることです(これは必ずしも必要ではありません)。

次に、あなたのリンクhrefのためにハッシュタグを使用してください、そして、それらのリンクにjQueryのpreventDefault()関数を使用しないでください。そうすれば、それらのリンクは、href値として設定したハッシュタグを追加してURLバーを変更します。次に、これらのリンクにファンシーボックスを表示する関数をアタッチします。

最後に、この関数を値として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> 
+0

美しい!完璧に動作します!おかげでたくさんの男 – user1006257

+0

問題ありません!それを受け入れられた答えとしてマークしたいですか? – rossipedia

関連する問題