1

以前はfancyboxを正常に使用しましたが、最新のデザインでは、fancyboxによってスクロールバーが表示されます。つまり、画像をクリックすると、画像がウィンドウの中央に表示され、ウィンドウ自体に、以前は使用していなかったスクロールバーが表示されます。 。私のレイアウトは流動的で、ウィンドウサイズやフォントサイズを変更すると調整されます。次に、fancyboxを使用すると、明らかな理由もなくページ全体がシフトおよび再スケーリングされます。これは見栄えが悪く、プロセッサの能力も使用します。

これの原因は何でしょうか？

また、背景を暗くすることができません...これを達成するためにfancyboxは通常何をしますか、そしてなぜそれが私のデザインで失敗するのでしょうか？

コードスニペットは次のとおりです。

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
$('.fancybox').fancybox();
});
</script>

<div id="wrapper">
<div id="classes" class="post">
<h2>料理教室・ワークショップ</h2>
<a class="fancybox" rel="classes" href="http://127.0.0.1/wordpress/wp-content/themes/hitomiskuche/images/classes/1.jpg">フォトス</a>
<a class="fancybox" rel="classes" href="http://127.0.0.1/wordpress/wp-content/themes/hitomiskuche/images/classes/2.jpg"></a>
<a class="fancybox" rel="classes" href="http://127.0.0.1/wordpress/wp-content/themes/hitomiskuche/images/classes/3.jpg"></a>
</div>
</div>

#classes {
    width:40%;
    position:absolute;
    left:5%;
    bottom:10%;
    background-color:#fff;
    padding:1em;
    opacity:0.65;
    box-shadow:2px 2px 3px #555;
}
4

3 に答える 3

5

これを試して：

$(".fancybox").fancybox({
    helpers : {
        overlay : {
            locked : false
        }
    }
});

また、「スーパーサイズ」のようなフルスクリーンの背景を使用している場合は、これをページの css に追加することもできます。

html {overflow: -moz-scrollbars-vertical; overflow: scroll;}
于 2013-04-12T07:56:23.273 に答える
-1

Fancybox はクラスfancybox-overlayを使用してオーバーレイを表示します。

.fancybox-lock .fancybox-overlay {
    overflow: auto;
    overflow-y: scroll;
}

overflow-y:scrollプロパティはスクロールバーを表示しています。それを取り出すと、あなたは分類されます。

fancybox_overlay.pngまた、 fancybox の css ファイルと同じフォルダーにを含めていない可能性があります。オーバーレイの背景は、このファイルから作成されます。この情報が役立つことを願っています

于 2012-09-14T15:12:39.450 に答える