jQuery Image Resize on Colorbox

Question

I am trying to figure out why my colorbox popup doesnt automatically resize on first load, but then on the second try, it will.

this is a screenshot

    <script type="text/javascript">
      ResizePopUp = function () {
        var frameWidth = jQuery(".imgPopUpContainer").width();
        var frameHeight = jQuery(".imgPopUpContainer").height();
        try {
          parent.jQuery.fn.colorbox.resize({ innerHeight: frameHeight, innerWidth: frameWidth });
        } catch (e) { }
      };
      jQuery( document ).ready(function() {
        ResizePopUp();
      });
    </script>

I am using colorbox http://www.jacklmoore.com/colorbox/

Do you know guys what's the issue here?

Answer 1

You probably want to call your ResizePopUp() function in the $( window ).load event handler instead of the $(document).ready handler.. your DOM may be ready, but the rest of the content (images, iframes, etc.) probably aren't...

source: http://learn.jquery.com/using-jquery-core/document-ready/

Answer 2

There is a chance that jQuery(".imgPopUpContainer").width(); and height are not yet available.

You can test this theory by adding a short timeout:

  jQuery(document).ready(function() {
    window.setTimeout(function(){
      ResizePopUp();
    }, 3000);
  });

If that is the case you can use a library like: http://imagesloaded.desandro.com to see if the image has been loaded before calling height() and width().