title: jquery undefined global variable
body: <p>I have the following:</p>
  
  <pre><code>    var ImageArray = [];
      var Images = $('#ImageSelection').children('img');
  
      var i = 0;
  
      Images.each(function() {
          var ImageSource = $(this).attr('src');
          var ImageTitle = $(this).attr('alt');
          var ImageHeight;
          getImageDimensions(ImageSource, function(data) {
              ImageHeight = data.height;
              alert(typeof ImageHeight + ' ' + ImageHeight);
          });
          alert(typeof ImageHeight + ' ' + ImageHeight);
          $(this).attr('id', i);
          ImageArray[i] = {
              'src': ImageSource,
              'title': ImageTitle,
              'height': ImageHeight,
              'id': i
          };
          i++;
      });
  </code></pre>
  
  <p>After I run this code, <code>ImageArray[0].height</code> is undefined, but the alert in the callback function displays the height just fine, while the alert which is not in the callback, displays undefind.</p>
  
  <p>The getImageDimensions:</p>
  
  <pre><code>    function getImageDimensions(path, callback) {
          var img = new Image();
          img.onload = function() {
              callback({
                  height: img.height
              });
          }
          img.src = path;
      }
  </code></pre>