Fancebox auto-resize with restrictions

so we all know that fancybox has resizing functionality, which is great, but if the content is larger than your screen, it will also resize and you will have to scroll down the browser scrollbars, not the fancybox scrollbars.

To resize without a quick mess, I like it.

<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 certain value, f.ex I want to authorize, BUT no more than a width: 800 pixels; and height: 900px;

To illustrate what I have now and what I want to achieve, here are a few screens:

Current: alt text

It is required: alt text

Any ideas?

+3
2

MyTagStyle:

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

FancyBox "", ... - , :

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

940px 400px ( %)... , fancybox, , !!!

PS: !

+8

Source: https://habr.com/ru/post/1779474/


All Articles