jQuery 有限制的fancybox自动调整大小

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4402656/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 17:13:43  来源:igfitidea点击:

fancybox auto-resize with limits

jqueryhtmlfancybox

提问by Lukas ?alkauskas

so we all know that fancyboxhave resize functionality and thats great, but if the content is larger than your screen it will resize as well and you have to scroll down with you browser scroll bars, not with fancybox scroll bars.

所以我们都知道fancybox有调整大小的功能,这很好,但是如果内容比你的屏幕大,它也会调整大小,你必须用浏览器滚动条向下滚动,而不是用fancybox滚动条。

To resize without fast clutter I do like this.

为了在没有快速混乱的情况下调整大小,我喜欢这样。

<script type="text/javascript">
    jQuery(document).ready(function() {
        $('MyTagValue').fancybox(
        {
            'titlePosition' : 'inside',
            'transitionIn'  : 'fade',
            'transitionOut' : 'fade',
            'onStart' : function()
            { 
                $('#MyTagStyle').css(
                {
                    marginLeft: '-10000px'
                }); 
            }, 
            'onComplete' : function()
            { 
                $.fancybox.resize(); 
                $('#MyTagStyle').css(
                {
                    marginLeft: '0px'
                }); 
            }  
        });
    });
</script>

so my question is how to resize within your browser screen, or no more than a specific value, f.ex I want to autoresize, BUT no more than width: 800px; and height: 900px;

所以我的问题是如何在浏览器屏幕内调整大小,或者不超过特定值,例如我想自动调整大小,但不超过宽度:800px;和高度:900px;

to illustrate what I have now, and what I want to achieve, here is some screens:

为了说明我现在拥有的以及我想要实现的目标,这里有一些屏幕:

Current:alt text

当前的:替代文字

Wanted:alt text

通缉:替代文字

Any ideas?

有任何想法吗?

采纳答案by Lukas ?alkauskas

Solved this problem by editing MyTagStyle:

通过编辑 MyTagStyle 解决了这个问题:

.MyTagStyle
{
    max-height:600px;
    max-width:940px;
    overflow:auto;
}

回答by Zuul

FancyBox as built in method to set width and height to the "window" generated to hold the content... check the website for further instructions, but here's a hit:

FancyBox 作为内置方法将宽度和高度设置为为保存内容而生成的“窗口”......检查网站以获取进一步说明,但这里有一个命中:

// initialize popup iframe (fancybox)
$(".popupIframe").fancybox({
    'autoDimensions': false,
    'padding'       : 0,
    'width'         : 940,
    'height'        : 400,
    'autoScale'     : false,
    'transitionIn'  : 'none',
    'transitionOut' : 'none',
    'type'          : 'iframe'
});

Here I'm setting a popup with fixed 940px by 400px (it can be % values as well)... and if the content is larger then the fancybox holder, it will generate scroll bars on that same holder and not on the document itself!!!

在这里,我设置了一个固定的 940 像素 x 400 像素的弹出窗口(它也可以是 % 值)...如果内容比fancybox 支架大,它将在同一个支架上而不是在文档本身上生成滚动条!!!

PS: If I read your question right!

PS:如果我没看错你的问题!