0

これを説明する方法がわかりませんが、次のようになります。

Fancybox がページ上で「ボックス」を開き、その中にスクロール バーを配置してオーバーフロー コンテンツを表示する代わりに、現在のコンテンツまたは親コンテンツの上にコンテンツを配置したいと考えています。

したがって、現時点では、ブラウザの内側の幅が 800px で、高さ 1200px が必要なコンテンツを開こうとしている場合、Fancybox の「ボックス」の高さを 800px に設定でき、スクロールバーを使用して新しい「ボックス」のコンテンツをスクロールできます。 (コンテンツが 1200px であるため)。私はそれをやりたいので、新しいスクロールバーはありませんが、新しいコンテンツはメイン/親ページを押し下げる完全な1200pxです(まだ存在しない場合は親にスクロールバーを強制します)。

閉じるボタンをクリックしても閉じます。

これは可能ですか？私は理にかなっていますか？

これは FancyBox 2 用です。

4

1 に答える 1

2

したがって、このhtmlの場合

<a class="fancybox" href="{target content}">open content at 1200px height</a>

このスクリプトを使用します

$(".fancybox").fancybox({
 type: "html", // set type of content -Supported types are 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html'
 width: 800, // or whatever
 height: 1200,
 autoSize : false, // so the size will be 800x1200
 autoCenter: false, // so fancybox will scroll down if needed
 fitToView : false, // so fancybox won't try to scale the content to the size of the browser window
 scrolling : "no" // so no scroll bars inside fancybox
});

注: 画像に特定の寸法を設定することはできません。フル サイズ (が にfitToView設定されている場合false) またはビューポートに合わせて拡大縮小されます (が にfitToView設定されている場合true)。他のタイプのコンテンツは、上記のコードのようにwidthとのサイズに調整できます。height

ヒント：それぞれ異なる高さの異なるタイプのコンテンツ（または異なるコンテンツをターゲットとする）を開きheight、HTML5data-*属性を使用して動的にファンシーボックスを変更することができます....このhtmlの場合：

<a class="fancybox" href="{target content 01}" data-height="1200">open content 01 at 1200px height</a>
<a class="fancybox" href="{target content 02}" data-height="1000">open content 02 at 1000px height</a>
<a class="fancybox" href="{target content 03}" data-height="1450">open content 03 at 1450px height</a>

beforeShow次に、コールバックをスクリプトに追加して、data-heightこのような値を取得します

$(".fancybox").fancybox({
 type: "html", // set type of content -Supported types are 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html'
 width: 800, // or whatever
 // height: 1200, // no fixed height but obtained dynamically
 autoSize : false, // so the size will be 800x1200
 autoCenter: false, // so fancybox will scroll down if needed
 fitToView : false, // so fancybox won't try to scale the content to the size of the browser window
 scrolling : "no", // so no scroll bars inside fancybox
 beforeShow : function(){
  this.height = $(this.element).data("height");
 }
});
于 2012-09-15T07:35:43.190 に答える