fancybox auto-resize with limits

Question

so we all know that fancybox have 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.

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;

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

Current:

Wanted:

Any ideas?

Answer 1

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:

// 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!!!

PS: If I read your question right!