web-dev-qa-db-ja.com

FancyBoxを使用してインラインコンテンツをロードする

まあ、私は単にこの投稿を書いて、同じ問題に遭遇する可能性のある他の人を助けることを願っています。

ベンダーのWebサイトの例は少しあいまいで、次のシナリオを想定していました。

何らかのコンテンツの#idへのhrefnのリンクがあります

<a href="#content-div" class="fancybox">Open Example</a>

そしてそのコンテンツを保持するdivがあります。

<div id="content-div" style="display: none">Some content here</div>

その後、単に1ライナーでFancyboxを実行します。

$(".fancybox").fancybox();

当然、あなたはFancyboxがコンテンツをコピーし、display: noneをdisplay: blockに変更すると思います。すべては大丈夫です。

しかし、これは起こりません。
コンテンツはまだロードされますが、コンテンツは非表示になり、空のFancyboxがあります。 *cry*

jqueryhtmlcssfancybox
68
Marko

解決策は非常に簡単ですが、それを見つけるのに約2時間半頭の髪がかかりました

単純にwrapコンテンツを（冗長）display: noneとBobを持つdivはあなたの叔父です。

<div style="display: none">
    <div id="content-div">Some content here</div>
</div>

ボイラ

122
Marko

私がこれを理解した方法は、Fancyboxのインストールに同梱されているサンプルのindex.html/style.cssを調べることでした。

デモWebサイトに使用されているコードを表示し、基本的にコピー/貼り付けを行うと、問題ありません。

インラインFancyboxを機能させるには、index.htmlファイルに次のコードが存在する必要があります。

  <head>
    <link href="./fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" type="text/css" media="screen" />
    <script>!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');</script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {

    $("#various1").fancybox({
            'titlePosition'     : 'inside',
            'transitionIn'      : 'none',
            'transitionOut'     : 'none'
        });
    });
    </script>
  </head>

 <body>

    <a id="various1" href="#inline1" title="Put a title here">Name of Link Here</a>
    <div style="display: none;">
        <div id="inline1" style="width:400px;height:100px;overflow:auto;">
                   Write whatever text you want right here!!
        </div>
    </div> 

</body>

スクリプトファイルが置かれているフォルダーと、Headタグのどこを指しているのかを正確に忘れないでください。それらは一致しなければなりません。

8
tandy

Wordpressユーザー、

明らかなように、divが新しい投稿ページに一般的にリンクするヘッダーなどに基づいてAJAXコンテンツを返している場合、一部のチュートリアルではfalseを返します同じページで投稿データを返すと、そのページは移動できなくなりますが、falseを返すと、Fancybox2も同じことを実行できなくなります。

そのため、この種のリンクでは、hrefプロパティが選択するハッシュ（＃）divであることを確認し、javascriptでfalseを返さないようにしてください。

シンプルだね^ _ ^

2
Jamaal Okeen Ephriam