Broken Colorbox resize animation

Question

I use Colorbox to display iframe content. Some of the iframes are bigger than the original one (opening with set width and height), so I use this solution - How can I dynamically resize the jQuery Colorbox plugin? - to resize Colorbox's height after it's loaded.

The problem is, when Colorbox is getting smaller, it stretches down the contents height from bottom to top instead of nicely stretching it to the center of the page. I want it to look exactly as you can see in the colorbox examples with pictures: http://jacklmoore.com/colorbox/example1/ first link.

Opening colorbox in parent:

       <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1  /jquery.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.colorbox-min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $.extend($.colorbox.settings, {fastIframe:true, speed:350, transition:'elastic', scrolling:false, opacity:0.6, close:'Zavřít', overlayClose:false});
    $(".iframe").colorbox({iframe:true, width:'640px', height:'480px'});
    });
    </script>

Resizing in iframe:

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.colorbox-min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        parent.$.colorbox.settings.overlayClose = true;
        var y = $('#cbox').height() + $('#cbox').offset().top + 30;
        parent.$.colorbox.resize({width:'644px', innerHeight:y});
    });
    </script>

Do you see any problem in the code above? Thanks for answers!

Answer 1

So I've found the solution!

The problem was, that I tried to edit default colorbox.css. And I accidentally removed: #cboxContent{background: #fff;} Without the line it was causing the error.