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

正如 Rob 和 Eva 所回答的那样，将帮助代码添加到 java script conf 对我有用

这是我的完整代码

        $(document).ready(function() {
            $(".fancybox").fancybox({
                maxWidth        : 800,
                maxHeight   : 500,
                fitToView       : true,
                width       : '100%',
                height      : '100%',
                autoSize        : true,
                closeClick      : true,
                openEffect  : 'elastic',
                closeEffect : 'elastic',
                helpers : {
                overlay : {
                    locked : false
                }
            }

            });
        });
于 2017-06-17T04:49:52.510 回答
-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 回答