FancyBox Automatically Grow/Shrink and Center with jQuery Collapse-O-Matic

[SpareArea]

First off I'd like to say this is an awesome script. I use WordPress and I've been trying to use plugins to try and accomplish the FancyBox look, but it would never really look the way I wanted it. I decided to just test it on a demo site by adding the script manually to my custom theme and it worked great. Still kind of a noob when it comes to using jQuery so it took me awhile to get used to it, but the time spent was well worth it.

Anyway as I was testing it out I noticed there was an update on you site. I originally downloaded v2.0.5. I was trying to get it to work with a WordPress Pluging called 'jQuery Collapse-O-Matic'. This plugin allows you to wrap content in shortcodes so that you can make certain parts of your content expand/collapse and be visible/hidden when you click on it. It really worked great with FancyBox, and I was able to make some pretty cool popups with one little quirk.

When i click on a link that pops up the FancyBox, the initial content centers in the browser and it looks good. However, if i expand/collapse content the FancyBox grows/shrinks to fit the content but it does not center automatically until I resize the browser window. Not a huge deal if the expanded/collapsed content is small because its just a little off center until I resize. But if the collapsed content is larger it gets pushed of the screen and looks funny. I was able to work around this by using the topRatio option set to '0'. That made the content align to the top when the FancyBox popped up and it give kind of a shade effect when you expand content. I could live with that. It's actually kind of cool.

So now i downloaded v2.1.2 to test some of the new functionality but as I was testing I noticed a new problem. With v2.0.5 the FancyBox would grow/shrink to fit the content, but now with v2.1.2 that functionality is broken.

If the initial content is collapsed, when I expand it the Fancybox does not grow automatically. Instead it makes scroll bars appear or it cuts off the content until I resize the browser and it looks ugly.

Or

If the initial content is expanded and I collapse, it does not shrink automatically. Instead, there is a huge empty white space until i resize, also ugly.

I tried the different options in the documentation, but I couldn't find one that would make it work as it used to. I also looked at the code in jquery.fancybox.js and as I am noob, I didn't even know where to begin. Maybe I'm just not using the options properly. Here is what my code looks like now (this worked with v2.0.5):

$(document).ready(function(){
$('.fancybox').fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
scrolling : 'no',
minWidth : '900',
topRatio : '0',
});

Or if its in jquery.fancybox.js maybe you could show me which line of code i need to change.

Extra Credit
It would be awesome if the FancyBox would automatically re-center when the content expanded/collapsed.

Any help would be greatly appreciated!

[fancyapps]

Could you post any demo? That would help to understand your needs.

Anyway, you can update dimensions and center the box using $.fancybox.update();

[SpareArea]

Sorry should have done that in the first place. Here is a link:

http://www.sparearea.com

Oh and sorry again i'm a total noob. Where and how would I use $.fancybox.update();

[fancyapps]

That would go after each content change.

Could you set "minHeight : 0" and see if helps? Looks like the height is smaller and the script sets minHeight value as the height.

[SpareArea]

K, tried what you said. Still nothing. Maybe I did it wrong. Here's what i put in my script.js file for the demo site

$(document).ready(function(){
$('.test1').fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
scrolling : 'no',
minWidth : '900',
minHeight : '0',
});

$.fancybox.update();

    $('.test2').fancybox({
    openEffect      : 'elastic',
    closeEffect : 'elastic',
scrolling       : 'no',
minWidth        : '900',
minHeight       : '0',
});

$.fancybox.update();

    $('.test3').fancybox({
    openEffect      : 'elastic',
    closeEffect : 'elastic',
scrolling       : 'no',
minWidth        : '900',
minHeight       : '0',
topRatio        : '0',
});

$.fancybox.update();

    $('.test4').fancybox({
    openEffect      : 'elastic',
    closeEffect : 'elastic',
scrolling       : 'no',
minWidth        : '900',
minHeight       : '0',
topRatio        : '0',
});

$.fancybox.update();

});

[SpareArea]

Sorry didn't past that right. Here it is again:

$(document).ready(function(){
    $('.test1').fancybox({
    openEffect      : 'elastic',
    closeEffect     : 'elastic',
    scrolling       : 'no',
    minWidth        : '900',
    minHeight       : '0',
    });

    $.fancybox.update();

    $('.test2').fancybox({
    openEffect      : 'elastic',
    closeEffect     : 'elastic',
    scrolling       : 'no',
    minWidth        : '900',
    minHeight       : '0',
    });

    $.fancybox.update();

    $('.test3').fancybox({
    openEffect      : 'elastic',
    closeEffect     : 'elastic',
    scrolling       : 'no',
    minWidth        : '900',
    minHeight       : '0',
    topRatio        : '0',
    });

    $.fancybox.update();

    $('.test4').fancybox({
    openEffect      : 'elastic',
    closeEffect     : 'elastic',
    scrolling       : 'no',
    minWidth        : '900',
    minHeight       : '0',
    topRatio        : '0',
    });

    $.fancybox.update();
});

[fancyapps]

1. Sorry, my mistake. I forgot to update dimensions after animation has completed. You either set openEffect/closeEffect to 'none' or find line 1428 and replace F.reposition(); with F.update();

2. That method $.fancybox.update(); has to be called right after content width/height has changed. Unfortunately, your collapsing plugin does not provide useful callbacks. The basic collapsing script would look like this -

$(".collapseomatic").click(function() {
    $(this).next().toggle();

    $.fancybox.update();
});

[SpareArea]

1. Awesome! Both options worked, so i decided to go with the second option and replace F.reposition(); with F.update(); so that i could keep using the elastic effect.

2. Tried the code above and it makes everything collapse and it won't come back. Tried this:

$(".collapseomatic").click(function() {
    $.fancybox.update();
});

and for the first two links on the demo page the fancybox jumps up or down whenever a title is clicked. The other two work the same because of topRatio.