CODEWITHSUNDEEP
jqueryhtmlfancybox
Lukas Šalkauskas
Lukas Šalkauskas

Reputation: 14361

fancybox auto-resize with limits

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: alt text

Wanted: alt text

Any ideas?

Upvotes: 4

Views: 23526

Answers (2)

Lukas Šalkauskas
Lukas Šalkauskas

Reputation: 14361

Solved this problem by editing MyTagStyle:

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

Upvotes: 0

Zuul
Zuul

Reputation: 16269

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!

Upvotes: 8

Related Questions