0

divでラップされたnivoスライダーでfancybox 2を使用するのに問題があると思っていましたが、いくつかのテストの後、divでfacybox 2を使用すると問題があることがわかりました。そこで、質問を整理します。わかりやすくするために、コードを次のように投稿します。

CSS の場合:

<style>
  #content{
    background: red;
  }
  #maximize{ width: 24px; height: 24px; }
</style>

HTML の場合:

<a href='#content' id="maximize"> max </a>
<div id="content"> </div>

JS の場合:

$('#maximize').click(function() {
$('#maximize').fancybox({
     'href' : '#content'
   });
});

最大ボタンをクリックすると、期待どおりに機能します。ただし、fancybox を閉じると、ポップアップ ボックスがなくなり、id = "content" の元の div も消えてしまいます。これは想定外です。内容はそのままにしてほしいが、消えてはならない。

その他の質問: 表示されるファンシー ボックスのサイズを変更するにはどうすればよいですか? ファンシーボックスを大きくしたい。

私の質問が十分に明確であることを願っています。前もって感謝します。

4

1 に答える 1

0

実際には必要ありません: 

$('#maximize').click(function() {
   $('#maximize').fancybox({
     'href' : '#content'
   });
});

...しかし、これだけ:

$('#maximize').fancybox({
    // API options here
});

... はすでにイベントを selectorに.fancybox()バインドしているため、それ以外の場合は冗長です ....はリンク内の属性から既に取得されているため、オプションも同様です。click#maximize'href' : '#content'hrefhref

一方、fancybox は、開かれたinlineコンテンツが期待される状態であるため、常に非表示にします (fancybox に既に表示されているものを表示するのは冗長ではありませんか?) ... とにかく、コールバックを使用して再び表示することができますafterCloseお気に入り ：

$('#maximize').fancybox({
    afterClose: function() {
        $("#content").show();
    }
});

2 番目の質問については、widthとオプションをとheightとともに使用して、次のような好みのボックスの寸法を設定します。fitToViewautoSize

$('#maximize').fancybox({
    fitToView: false, // avoid the adjusting size to viewport
    autoSize: false, // avoid set size based on content
    width: 420, // or whatever
    height: 320,
    afterClose: function() {
        $("#content").show();
    }
});​

実際のデモを見る

于 2012-12-11T20:37:48.363 に答える